Mozilla Hacks

New Features in the Firefox Developer Tools: Episode 26

Avatar photo By Paul Rouget, Robert Nyman [Editor emeritus]

Posted on September 26, 2013 in Developer Tools

Firefox 26 was just uplifted to the Aurora release channel which means we are back to report on new features in Firefox Developer Tools. Here’s a summary of some of the most exciting new features.

Inspector: pseudo element support

To get more flexibility in the design of an element without using additional nodes, it’s very common to use CSS pseudo elements, eg (`:before/:after{content:””}`). In the Inspector it’s now possible to see the rules applied to pseudo elements.

Debugger: break on uncaught exceptions

It’s now possible to pause the debugger on uncaught exceptions. It makes debugging unexpected errors easier and prevents the developer from having to step over a barrage of exceptions which were handled by Try/Catch blocks.

Web Console: Better text selection

It used to be hard to select text from the web console. Fixing this bug needed a whole rewrite of the console output area. This will make copying/pasting logs much simpler and provides the ground-work for improved console output features landing soon.

Global UI improvements

It is now possible to zoom in and zoom out for the UI of all the developer tools. Do you prefer bigger fonts? Hit Ctrl +. Smaller? Ctrl -. (Cmd in Mac OS X).

The DOM view in the Inspector has also been improved. The selection is more obvious and it’s easier to expand nodes and very long attributes are now cropped.

Keyboard shortcuts improvements: It’s now easier to control the tools from the keyboard. We’ve created many new keyboard shortcuts and tried to be compatible with other browsers. All the available keyboard shortcuts for the Developer Tools are listed on MDN.

As an added bonus, we also moved the URL preview (the bar that pops out when hovering a link with the mouse) above the toolbox. It doesn’t cover the Web Console input or any other tool anymore.

Responsive Design View

The Responsive Design View comes with 3 new improvements:

  • Touch Event simulation (mouse events are translated to touch events)
  • Quick screenshot
  • Precise resize. Press Ctrl while moving the mouse for a more accurate resize

When can I use these features?

All of these features and more are available in the Firefox Aurora release channel. In another 12 weeks, these features will roll over into Firefox stable.

Have some feedback about devtools? Ping @FirefoxDevTools on Twitter, or swing by #devtools on irc.mozilla.org.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…

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 http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

17 comments

  1. Patrick H Lauke

    Excellent news about the touch event emulation. I see that, compared to the equivalent functionality in Chrome DevTools, Firefox actually sends them in the correct order (touchstart > touchend > mousedown > (a single) mousemove > mouseup > click) (compared with https://code.google.com/p/chromium/issues/detail?id=181204)

    Two aspects would be cool to still add though: once touch emulation is enabled, suppress the regular mouse events (so just moving the mouse pointer won’t fire mouseover/mousemove/mouseenter/mouseleave) and emulate the 300ms delay between the touch events and the fallback mouse events (but suppress it in the cases where it’s been optimised away in real mobile devices, e.g. when meta viewport has user-scalable=no or minimum-scale and maximum-scale have been set to same value)

    For testing, see http://patrickhlauke.github.io/touch/tests/event-listener.html

    September 26th, 2013 at 01:53

  2. Antwan

    Hi Paul and the team, thanks for the great work! I was thinking about a huge feature never seen in any inspector : it would be really cool and useful to be able to move and reorganise the nodes in the DOM tree with drag and drop. Currently if we want to do this, we have to edit a node innerHTML, then copy and paste the code… and it’s not convenient at all (just to find how to edit HTML is a challenge).

    I’m certainly not the only one who needs to reorganise the code in live, so this would be a very nice stuff and would help a lot ! Because for the moment if users stick to firebug it’s mostly because of devtools’ limited usability…

    Keep up the good work :)

    September 26th, 2013 at 02:22

    1. Paul Rouget

      Indeed, that’d be nice: bug 858038.

      September 26th, 2013 at 02:41

    2. Luke

      @Antwan Chrome/Chromium already has this feature in the inspector – you can drag and drop elements. I was also missing the edit-as-html feature in Firefox, I wrote a small addon with that and other small tweaks: https://addons.mozilla.org/en-US/firefox/addon/devtools-tweaks/

      These new Firefox 26 features are very welcome – especially the touch emulation! However, the one major bug of the debugger for me is the lack of html integration – it will show you every detail of the objects within var myvar = jQuery(myselector), for example, but will not simply highlight the element(s) that it represent! This is the major reason I still go to Chrome for Javascript debugging sometimes. Anyone else noticing this?

      October 2nd, 2013 at 19:48

  3. Patrick H Lauke

    took the liberty of posting the above as an actual bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=920956

    September 26th, 2013 at 02:50

    1. Robert Nyman [Editor]

      Thank you!

      September 26th, 2013 at 04:16

  4. Nicolas Toniazzi

    Hello, the Touch Event simulation is really nice, but apparently, it’s only capable of simulating a single touch. Multi-touch simulation would be great, as Touch Enabler used to do (https://addons.mozilla.org/en-US/firefox/addon/touch-enabler/).

    September 26th, 2013 at 06:04

  5. Ken Saunders

    It’s all great (as always), but I really appreciate the zoom feature.
    Thanks!

    September 27th, 2013 at 04:50

    1. Robert Nyman [Editor]

      Thanks, glad you like it!

      September 27th, 2013 at 04:56

  6. pd

    Not having to turn on the display of psuedo element styles from a submenu, as is the case in Firebug, is an improvement. Responsive design tools are an improvement that Firebug does not yet have.

    For all those Firebug users out there, whom Mozilla appears to have shifted focus away from, please, for the love of the open web, look into this bug:

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

    as a matter of priority. After all, people have been using Firebug for years. Mozilla encourages people to support the open web and thus Firefox. Developers are the ones who ensure standards are followed, we’ve been punching away at keyboards and clicking Firebug tabs for years in an attempt to build your open web. We deserve a functional Firebug.

    On another developer tools note, has the “Web Console” completely replaced the “Error Console”? For some reason I think I still have both on my work machine which is the latest Aurora. Perhaps Web Developer

    September 27th, 2013 at 07:14

    1. KWierso

      The *Browser* Console has replaced the Error Console. It looks very similar to the Web Console, but it exists as a standalone window and gets messages from the entire browser, as opposed to only the current tab.

      September 27th, 2013 at 14:50

  7. Albert

    Don’t even have a specific favourite this time … all great new features :)

    Thanks!

    September 27th, 2013 at 08:17

    1. Robert Nyman [Editor]

      Thank you, good to hear!

      September 27th, 2013 at 13:02

  8. James M

    This is all really cool and I’d love to start using Firefox for developing, but two tiny things are keeping me from using it. First is the rgb instead of hex values for color and second is the ability to add HTML to the document like on Chrome dev tools. There’s been an issue on the color since 2011 and nothing has been done.

    Firebug has it, but I don’t like the idea of switching between two dev tools just to get work done.

    October 1st, 2013 at 06:26

    1. Mike Ratcliffe

      “First is the rgb instead of hex values for color”
      If you use Nightly … maybe even Aurora then you can choose the default color type in the options panel.

      October 6th, 2013 at 13:51

  9. zalex

    Hi there! In the video, Firefox looks very nice (Linux, i suspect Ubuntu). Can you please tell me what theme is this? It is a similiar one for Win? Cheers!

    October 10th, 2013 at 13:34

    1. Mike Ratcliffe

      That is the UX build and is not very stable. If you really want to try it you can grab a copy from http://people.mozilla.org/~jwein/ux-nightly/

      October 10th, 2013 at 16:35

Comments are closed for this article.