Reintroducing the Firefox Developer Tools, part 2: the Scratchpad and the Style Editor

This is part two, out of five, focusing on the built-in Developer Tools in Firefox, their features and where we are now with them. The intention is to show you all the possibilities available, the progress and what we are aiming for.

In the first post in the series we discussed the Web Console and the JavaScript Debugger. While these two tools are powerful and provide capabilities to interrogate and alter your web applications, additional tools are available to further enhance the developer experience while building and debugging your apps. In this post we briefly cover the Scratchpad and the Style editor.

As with the first post, we present each tool with a quick screencast demonstrating some of their capabilities.

The Style Editor

The Style Editor is primarily used to edit, debug or create new stylesheets within the context of the current app. Changes made in the style editor are automatically reflected in the loaded page. If you are not familiar with Cascading Style Sheets (CSS), please be sure to take a look at the CSS MDN documentation.

The Style Editor allows saving the changes made while using the editor. In addition you can also import existing stylesheets and apply them to the current page or individually disable specific stylesheets. The Style Editor is also linked to the Inspector allowing developers quick access to the stylesheet for the inspected element. The following screencast presents an overview of the Style Editor’s features.

For more detailed information on the Style Editor take a look at the MDN documentation.

Scratchpad

The Scratchpad has many uses and is essentially a live JavaScript editor and prototyping tool. Using the Scratchpad, a developer can access the current page’s objects, variables and script. In addition, complete functions can be written and tested in the editor within the scope of the live page. These changes can then be attached and saved with the current application.

External JavaScript files can also be loaded and tested. Several run options are available to allow a developer to just execute the code, execute the code and inspect the returned object, or execute the code and print out the results as a comment within the Scratchpad. The following screencast illustrates some of the features of the Scratchpad. Note that Scratchpad script runs in the same
context as a script loaded into the page. In the screencast, the example uses the jQuery library and some custom script to illustrate this feature.

For more information on the Scratchpad, see the MDN Debugger documentation.

If you are not very familiar with JavaScript, make sure to check out the MDN documentation for a comprehensive list of resources on learning the language and mechanics.

Learn More

These screencasts give a quick introduction to the main features of these tools. For the full details on all of the Developer Tools, check out the full MDN Tools documentation.

Coming Up

In the next post, we will focus on some Mobile design features including the Responsive Design View and Remote debugging using the App Manager. Please provide your suggestions on what features you would like to see explained in more detail in this upcoming post, by commenting below.

View full post on Mozilla Hacks – the Web developer blog

20 thoughts on “Reintroducing the Firefox Developer Tools, part 2: the Scratchpad and the Style Editor

  1. Mike Ratcliffe

    The reason that HTML5 video is not always offered by youtube embeds is because people still often use the old embed code. They should use the new code… I have never known it fail to offer HTML5 video when it is supported:

  2. Luke

    It does have autocomplete in css rule editor – in Firefox 25.

    Unless you mean the fact that it won’t let you arrow down or give you a dropdown for properties like display/position, which only have a few valid options. I agree that could be better handled.

  3. Luke

    Nice. Why don’t you add those shortcuts to the documentation?
    https://developer.mozilla.org/en-US/docs/Tools/Using_the_Source_Editor

    Earlier I had been trying to get a way to increment by 10 instead of one when using up/down in the inspector css editor, looking into the source for where to extend this, I found they already were there – Shift+up/down, not page up/down like most inspectors use, so I added that to the docs – hope more advanced features get a howto there 🙂

  4. Delapouite

    True, I was also surprised by the lack of frequent updates of the Aurora PPA since this summer. It was so convenient before.

  5. J. Ryan Stinnett

    We’ve actually just updated both the debugger and style editor to use CodeMirror as their text editor in Aurora (Firefox 27), and searching is much better as part of that change.

    Give Aurora a try and let us know what you think!

  6. Mindaugas J.

    Remote/browser debugging add-ons does not always work.

    I have the following issues:
    On desktop scripts in chrome://myapp/preferences.html stop on breakpoints only on the first load of the debugging session. Afterwards it just ignores any breakpoints.

    On fennec the code running on tabInit stops on breakpoints only if you disable/reenable the add-on. Opening a new tab is not enough. DocLoad is fine though.

    On fennec chrome://myapp/preferences.html is undebuggable. Opening the tab process shows no sources. Breakpoints in the main process are ignored.

    Are these issues known? I would submit them to bugzilla if need be, but the question is, how many bugs I should create 😛

  7. nemo

    Maurizo, I don’t personally have flash on this machine (and the ones I do have it on, I keep it disabled 99% of the time) but, I’d suggest:
    1) http://youtube.com/html5 opt in
    That doesn’t work on an annoyingly large number of videos for me, even ones friends upload. Oddly, it often *does* work if that very same video is an /embed/ (and no, doesn’t necessarily seem to be ad-related)

    2) https://addons.mozilla.org/en-US/firefox/addon/youtube-all-html5/
    This really does seem to work everywhere, and solve the annoying flash problem.

    Looks like Shumway isn’t an option yet :-/

  8. Maurizio

    Another thing… Aurora isn’t updated frequently anymore on Ubuntu PPA ( https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa )

    It was very convenient using Ubuntu PPA for Firefox Nightly just one or two months ago, when it was updated daily; now I am stuck with a version of 25th October, and before this release the PPA wasn’t updated for one month! Are there any problems? Who should I contact in order to report this? Thanks and much love to Firefox 🙂

  9. Nick Fitzgerald

    Copying my reply on HN here for posterity 🙂

    ———————————————————————–

    In Aurora, the tools now use Code Mirror as the editor. Along with that change, we now use Code Mirror’s searching, so Cmd+G and Cmd+Shift+G will cycle through next/previous search results.

    I filed a bug for a more discoverable UI: https://bugzilla.mozilla.org/show_bug.cgi?id=934624

    Here is this bug for searching across all sheets: https://bugzilla.mozilla.org/show_bug.cgi?id=932093

    It looks like it slipped under the radar, but I just talked with Heather who has worked on the Style Editor the most, and so it should be back on the radar now 🙂

    Anything else? 🙂

  10. Nick Fitzgerald

    @harthvader is working on initial source map support in the style editor and inspector right now. There is a little bit of infrastructure needed to automatically map files on the server back to the local filesystem, but it is on our roadmap!

Leave a Reply