New Features in the Firefox Developer Tools: Episode 26

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.

View full post on Mozilla Hacks – the Web developer blog

5 thoughts on “New Features in the Firefox Developer Tools: Episode 26

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

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

Leave a Reply