Mozilla

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.

22 comments

Comments are now closed.

  1. Adam wrote on November 4th, 2013 at 12:16:

    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.

    1. Nick Fitzgerald wrote on November 4th, 2013 at 13:53:

      @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!

  2. Shmerl wrote on November 4th, 2013 at 13:04:

    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.

    1. Nick Fitzgerald wrote on November 4th, 2013 at 13:54:

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

      1. Luke wrote on November 5th, 2013 at 21:55:

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

    2. J. Ryan Stinnett wrote on November 5th, 2013 at 03:32:

      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!

  3. eric wrote on November 4th, 2013 at 13:33:

    please add autocompletion on css… like firebug/chrome

    1. Luke wrote on November 5th, 2013 at 21:58:

      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.

  4. Maurizio wrote on November 4th, 2013 at 14:54:

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

    1. Robert Nyman [Editor] wrote on November 5th, 2013 at 04:57:

      YouTube uses HTML5 video if you have opted in to it: https://www.youtube.com/html5

      1. Mindaugas J. wrote on November 5th, 2013 at 05:00:

        Not for embeds, apparently

        1. Robert Nyman [Editor] wrote on November 5th, 2013 at 05:02:

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

          1. Mindaugas J. wrote on November 5th, 2013 at 05:05:

            Hmz, it works on FF.

            Must be a Chrome thing.

            No bashing :P

          2. Robert Nyman [Editor] wrote on November 5th, 2013 at 06:40:

            :-)

  5. Maurizio wrote on November 4th, 2013 at 15:00:

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

    1. Delapouite wrote on November 5th, 2013 at 15:41:

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

    2. Luke wrote on November 5th, 2013 at 21:59:

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

  6. nemo wrote on November 4th, 2013 at 16:30:

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

    1. Mike Ratcliffe wrote on November 8th, 2013 at 07:20:

      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:

      1. Mike Ratcliffe wrote on November 8th, 2013 at 07:22:

        The embed code was stripped out of my response:

        <iframe class=”youtube-player” type=”text/html” width=”640″ height=”385″ src=”http://www.youtube.com/embed/VIDEO_ID” allowfullscreen frameborder=”0″>
        </iframe>

  7. stripTM wrote on November 4th, 2013 at 18:08:

    @Maurizio,, Why not use directly official Mozilla binaries?
    http://www.mozilla.org/firefox/channel/

  8. Mindaugas J. wrote on November 5th, 2013 at 03:17:

    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

Comments are closed for this article.