HTML Editing and other improvements in Firefox 17 Developer Tools

Firefox 17 has recently hit the Aurora channel, and with it comes a number of  improvements to the built-in web developer tools.

HTML Editing

This is one of the most-requested features for our tools, and we’re happy with the solution we have for you. With the Style panel in the Page Inspector, you can easily manipulate the styles on the page. When you’re working on a layout, however, you sometimes need to manipulate the DOM of the page as well. The new “Markup panel” lets you do just that.

The new Markup Panel

To open the Markup panel, open the Page Inspector and click on the button that looks like an outline and appears right next to the “breadcrumbs” in the toolbar. In the screenshot above, that button is the third from the left. You can also press alt-M (ctrl-M on Mac) to open the Markup Panel.

As before, you can choose elements to inspect in the Style panel by clicking on them in the Markup panel. You can also right-click on the elements in the Markup panel to access a couple of handy features (copy HTML, delete the node).

What’s new in this version of the Markup panel? Previously, you could double click on an attribute value to change that value. Now you can double click almost anywhere to change anything. Double click on text to change the text. Likewise for the tag itself. See that space just before the closing “>” of a tag? Double click there and you can add new attributes.

You’ll also find that keyboard navigation for getting around and editing the DOM is easy to work with. You can use the tab key to move around within a tag and the arrow keys to move between nodes.

Note: the screenshot above shows the Markup panel with a dark theme. The plan is to replace this with a light theme before the feature is released.

More to love in the Web Console

The Web Console remains a favorite tool among web developers, and we’re happy to have even more improvements for you in this release.

Updated Web Console theme

The most visible change in the Web Console is the refreshed toolbar. The Web Console now has an appearance in line with the rest of the Firefox developer tools.

The screenshot above also shows off another improvement: better autocompletion. We’ve found and fixed some cases (like string objects) where the Web Console wasn’t giving as much help as it could.

Another important change to note: the Web Console comes with a helper function called $. Previously, that function was an alias for document.getElementById. In conjunction with other browser consoles, we’re changing it to be document.querySelector which is far more useful. To get the behavior you had before, just add a # at the beginning of the argument you pass in (for example, $("#myElementID")). You can continue to use $$ as an alias for document.querySelectorAll. If you’re using jQuery, the $ helper function will be replaced by jQuery, so this change won’t affect you.

Want to be able to see the Web Console’s text a bit more clearly? You can now zoom the Web Console using the same controls you use to zoom the browser window (ctrl-+, ctrl– and ctrl-0 to reset on Windows/Linux. Use cmd-+, cmd– and cmd-0 on Mac).

Using the built-in console.log function is a very handy way to add tracing to your web application. Now, if you send an object to console.log, you can now click on that object in the output area of the Web Console in order to inspect it.

Also in the screenshot above, you’ll see the “More Tools” button in the Developer Toolbar at the bottom of the window. That button gives you quick access to the rest of the developer tools. (Sharp-eyed readers might notice a mysterious “JSTerm” button on my Developer Toolbar. That’s Paul Rouget’s JSTerm add-on, which is really nice to use. Check it out!)

Page Inspector Visual Update

We’ve been listening to feedback from web designers since the Page Inspector made its debut on the Aurora channel last November. We found that the appearance of the dark “veil” over everything but the selected element was striking, but also making it harder for designers to see styling changes they made in the context of their overall design. We added options to turn off the page dimming a few months ago, but in this update we’ve got a lighter approach:

Updated highlighting in the Page Inspector

Instead of darkening the whole page, we highlight the selected element using a subtle dashed line and the useful node toolbar. Even better, when you move your cursor to the Style panel to try out style changes, the highlighting fades away entirely so that you can focus entirely on the styling.

Debugger Improvements

The Latest Debugger

The Debugger has had tons of improvements, some visible and some not, since it hit Aurora three months ago. One of the visible changes that you can see in the screenshot above: search across all scripts! Just go to the find box and start your search with “!” (exclamation point) and you’ll rapidly find matches across all of the scripts in the area just below the toolbar.

If you want more space to look at your code, there’s a new button in the toolbar (the second button on the left in the screenshot) that will close the two side panels to give your code all of the room it needs.

Finally, we’ve got more keyboard shortcuts to make using the Debugger quicker than ever:

  • alt-shift-P (Windows), ctrl-shift-P (Mac) to focus the search box
  • alt-shift-T (Windows), ctrl-shift-T (Mac) to do a string (token) search
  • F6 for continue
  • F7 for step over
  • F8 for step in
  • shift-F8 for step out

Update: One more debugger improvement to call out: as noted in the Firefox 15 release notes, there was a problem with the debugger not hitting its breakpoints on page reload. This is fixed in Firefox 16 (which is now in Beta).

Try Aurora: it’s good for you!

All of these changes are available today on the Aurora channel and are scheduled for release later in the year. I think you’ll find that Aurora works quite well, so give it a try and let us know what you think via the Feedback button!


28 comments

  1. Russ

    F6 for continue
    F7 for step in
    F8 for step out

    Please, PLEASE make these the same as firebug.

    September 4th, 2012 at 06:45

    1. Kevin Dangoor

      Note that I needed to correct the post. F8 for step in, shift-F8 for step out.

      The rationale for these keybindings is discussed here:

      https://bugzilla.mozilla.org/show_bug.cgi?id=775050

      Basically, this set of keybindings is reasonably conflict-free and works cross-platform.

      September 4th, 2012 at 07:16

      1. Russ

        Sorry Kevin, I disagree. As a windows dev, that’s now three sets of debugger stepping keys I need to map (mentally).

        Plus, I wouldn’t call clashing F6/F7 keys (already consumed by FF) “reasonably conflict-free” <- someone is adding code to detect context and focus to ensure the clash doesn't happen. That's code that now needs to be maintained that didn't exist before.

        $0.02

        p.s. unreadable CAPTCHA count: 37 (I kid you not)

        September 4th, 2012 at 08:07

        1. Kevin Dangoor

          It’s partly the cross-platform problem. When working on these shortcuts, I believe they were trying to make it so that the shortcuts you use would work no matter which machine you sit down at. One could argue about whether you should optimize for the platform or optimize for Firefox users who touch multiple platforms.

          F11 has conflict trouble on the Mac (not just Firefox).

          I do appreciate your $0.02 and will keep your feedback in mind along with that of others as we do some more user studies, gather more feedback.

          Thanks for persevering through the CAPTCHA pain. I sent email to one of the people who run Hacks to see if perhaps there’s a better anti-spam solution today. ReCAPTCHA has been getting unusable even for humans.

          September 4th, 2012 at 09:33

          1. Russ

            > One could argue about whether you should optimize for the platform or optimize for Firefox users who touch multiple platforms.

            Ah … now that’s a whole different can-o-worms. For me, key mapping should work as a cascade (yes, like CSS, kinda) – let me set my own and if I don’t, I get what the app (html) decides and if the app doesn’t choose, browser decides. (you get the idea).

            But that’s another debate. For this one, there is “prior use” to consider and coming up with a whole new mapping is the worst approach (again, 0.02)

            Heading off into CAPTCHA land – wish me luck!

            Count: 11

            September 4th, 2012 at 10:39

          2. tom jones

            now you are basically taking xcode mappings from OSX and forcing them on windows developers, who are much more numerous than both OSX developers and cross-platform firefox developers..

            just think about those priorities..

            also, stupid captcha..

            just my 2 euro-cents..

            September 5th, 2012 at 18:18

        2. Robert Nyman [Mozilla]

          I work with the Mozilla Hacks blog, and I’ll be honest: I’m not a big fan of the CAPTCHA either.

          It got implemented at a time where the level of spam wasn’t maintainable, but we definitely don’t want to make it harder for you to comment.

          It is part of the agenda of things to evaluate and improve here.
          Thanks for the comments, and for persisting!

          September 4th, 2012 at 12:03

          1. thinsoldier

            Off topic I know but I’ve just had a (probably not) brilliant idea to replace captchas.

            The rain in [photo of the flag of Spain] falls mainly on the:
            ( ) [ photo of a dog]
            (*) [ photo of a plane]
            ( ) [ photo of a car]

            [ try another question ] [ submit ]

            September 7th, 2012 at 12:56

          2. Russ

            thinsoldier: yep, I’ve seen quiz based sentries before. Works for me!

            captcha count: 35 (that’s effin ridiculous!)

            September 7th, 2012 at 13:06

  2. Daniel

    These are some really nice improvements!

    I would love to see in-place highlighting of margin/padding/border in the Page Inspector.

    What is the plan for the awesome JSTerm?

    “You can also press ctrl-M to open the Markup Panel”
    Form me it’s alt + m

    September 4th, 2012 at 09:34

    1. Kevin Dangoor

      Glad you like the improvements!

      Yeah, in-place highlighting of margin/padding/border is planned. There’s even a preliminary patch:

      https://bugzilla.mozilla.org/show_bug.cgi?id=663778

      Right now, we haven’t decided what we want to do with JSTerm. But, in the meantime, it’s a handy add-on :)

      Thanks for the correction. Keyboard shortcuts apparently trip me up!

      September 5th, 2012 at 06:54

  3. Jeff Sibbach

    More keyboard short-cuts! Use them all the time and love them.

    September 4th, 2012 at 23:59

  4. Foxinni

    Awesome. These are some really cool enhancements!

    September 5th, 2012 at 02:41

  5. Roman Semenenko

    A way to have REPL with current debugger information ( as in chrome or firebug ) would be very helpful.

    September 5th, 2012 at 02:54

  6. tom jones

    how is F6 not conflicting with “focus on the url bar”?

    September 5th, 2012 at 18:11

  7. starwed

    @tomjones That’s answered in the bugzilla discussion.

    > We’re safe as long as the Debugger has focus.

    September 5th, 2012 at 21:15

  8. Synonymous

    function $(param) document.querySelector(param) || document.getElementById(param);

    September 6th, 2012 at 09:36

  9. Peter Gasston

    These are all great, and I’m delighted to see the tools improve. But please, please provide the option to have the Style panel docked in the right of the Markup panel, as it is in all the other major browser tools; having it in its own panel on the right resizes the page when I open it on a small screen, which really isn’t ideal.

    September 10th, 2012 at 11:11

    1. Kevin Dangoor

      There’s currently a good deal of work being done on organization of the tools.

      One thing I’ll note for right now, though, is that if you turn on the responsive design view, the tools will not cause any resizing of the page from the size that you specify.

      September 10th, 2012 at 11:15

  10. Dave Rodriguez

    Any update on whether the dev tools will be able to pop out into a separate window from the browser?

    September 12th, 2012 at 09:41

    1. Kevin Dangoor

      They will be able to. There’s some refactoring going on to enable that to work well. No ETA yet, but that’s at the top of the queue.

      September 12th, 2012 at 10:50

      1. Russ

        Excellent – this is really a must for anything beyond “tinkering”…

        (stands back in amazement – can it be true??? what’s this I see? or, more to the point, what’s this I DONT see???)

        captcha count: 0

        FTW!

        September 12th, 2012 at 11:00

  11. tom jones

    related to what i already said above, i just read this today, and it clearly reminded me of this hotkeys issues:

    “I Wish This App Looked Identical On All Platforms”, Said No One, Ever

    http://fuckjetpacks.com/read/i_wish_this_app_looked_the_same_on_all_platforms_said_no_one_ever

    September 21st, 2012 at 18:45

  12. Emre Ayca

    I know it has been a while since this update but could you please bring back the options to “Dim the Page”? It was very useful and elegant, and while I can see why it is defaulted to the new lighter “crawling-ants” view, I do not understand why you have removed entirely the option to dim the page. Could you at least make it a hidden option, please?

    October 14th, 2012 at 14:44

  13. Zsolt

    “The plan is to replace this with a light theme before the feature is released.”

    Unfortunately it remained a plan. :-( Firefox 17 was released with the dark theme in the markup panel and it pretty much hurts the eyes (at least if you look at it for longer than a few seconds). And there’s no simple about:config option to set the background color or the theme, so I’ve to fall back to Firebug til this gets fixed.

    November 26th, 2012 at 03:11

    1. Kevin Dangoor

      Sorry about that. I guess the light theme didn’t quite land in time for 17. I see that it’s in Aurora 18 (and will be in Beta 18 when that’s released within the next day or two).

      November 26th, 2012 at 06:22

  14. Leho Kraav (@lkraav)

    Yep here’s +1 surprised about the light theme not making it :/

    December 2nd, 2012 at 05:14

  15. Adolfo Benedetti

    There is a switching setting in about:config (Aurora 19) for the light theme?

    December 15th, 2012 at 09:18

Comments are closed for this article.