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.


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.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. Adam

    Any plans to introduce SASS support in the editor?

    I’ve seen some interesting videos on Chrome’s Developer Tools showing how you can make edits to SASS files and live reload modified CSS.

    November 4th, 2013 at 12:16

    1. 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!

      November 4th, 2013 at 13:53

  2. Shmerl

    Style editor needs some work still. For example searching for text there is hard to use. There are no “find next” or “find previous” shortcuts, one has to open a dialog again each time.

    And there is no way to search in all style sources at once. Which makes tracking stuff harder if there are many sources provided.

    November 4th, 2013 at 13:04

    1. 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:

      Here is this bug for searching across all sheets:

      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? :)

      November 4th, 2013 at 13:54

      1. Luke

        Nice. Why don’t you add those shortcuts to the documentation?

        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 :)

        November 5th, 2013 at 21:55

    2. 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!

      November 5th, 2013 at 03:32

  3. eric

    please add autocompletion on css… like firebug/chrome

    November 4th, 2013 at 13:33

    1. 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.

      November 5th, 2013 at 21:58

  4. Maurizio

    Why do you use Youtube… it embeds Flash :-(((

    November 4th, 2013 at 14:54

    1. Robert Nyman [Editor]

      YouTube uses HTML5 video if you have opted in to it:

      November 5th, 2013 at 04:57

      1. Mindaugas J.

        Not for embeds, apparently

        November 5th, 2013 at 05:00

        1. Robert Nyman [Editor]

          I get a HTML5 video embed in this post (as opted in to HTML5 on YouTube).

          November 5th, 2013 at 05:02

          1. Mindaugas J.

            Hmz, it works on FF.

            Must be a Chrome thing.

            No bashing :P

            November 5th, 2013 at 05:05

          2. Robert Nyman [Editor]


            November 5th, 2013 at 06:40

  5. Maurizio

    Another thing… Aurora isn’t updated frequently anymore on Ubuntu 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 :-)

    November 4th, 2013 at 15:00

    1. Delapouite

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

      November 5th, 2013 at 15:41

    2. Luke

      I had noticed this with the Firefox 25-betas as well.

      November 5th, 2013 at 21:59

  6. 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) 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)

    This really does seem to work everywhere, and solve the annoying flash problem.

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

    November 4th, 2013 at 16:30

    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:

      November 8th, 2013 at 07:20

      1. Mike Ratcliffe

        The embed code was stripped out of my response:

        <iframe class=”youtube-player” type=”text/html” width=”640″ height=”385″ src=”” allowfullscreen frameborder=”0″>

        November 8th, 2013 at 07:22

  7. stripTM

    @Maurizio,, Why not use directly official Mozilla binaries?

    November 4th, 2013 at 18:08

  8. 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 :P

    November 5th, 2013 at 03:17

Comments are closed for this article.