Firefox 27 was just uplifted to the Aurora release channel which means we are back to report on new features in Firefox Developer Tools. Below are just some of the new features, you can also take a look at all bugs resolved in DevTools for this release).
JS Debugger: Break on DOM Events
You can now automatically break on a variety of DOM events, without needing to manually set a breakpoint. To do this, click on the “Expand Panes” button on the top right of the debugger panel (right next to the search box). Then flip over to the events tab. Click on an event name to automatically pause the next time it happens. This will only show events that currently have listeners bound from your code. If you click on one of the headings, like “Mouse” or “Keyboard”, then all of the relevant events will be selected.
We’ve listened to feedback from web developers and made a number of enhancements to the Inspector:
Edit as HTML
Now in the inspector, you can right click on an element and open up an editor that allows you to set the outerHTML on an element.
Select default color format
You now have an option to select the default color format in the option panel:
Color swatch previews
The Developer Tools now offer color swatch previews that show up in the rule view:
Image previews for background image urls
Highly requested, we now offer image previews for background image URLs:
In addition to above improvements, Mutated DOM elements are now highlighted in the Inspector.
Keep an eye out for more tooltips coming soon, and feel free to chime in if you have any others you’d like to see!
Codemirror is a popular HTML5-based code editor component used on web sites. It is customizable and theme-able. The Firefox Devtools now use CodeMirror in various places: Style editor, Debugger, Inspector (Edit as HTML) and Scratchpad.
From the Option panel, the user can select which theme to use (dark or light).
WebConsole: Reflow Logging
When the layout is invalidated (CSS or DOM changes), gecko needs to re-compute the position of some nodes. This computation doesn’t happen immediatly. It’s triggered for various reasons. For example, if you do “node.clientTop”, gecko needs to do this computation. This computation is called a “reflow”. Reflows are expensive. Avoiding reflows is important for responsiveness.
To enable reflow logging, check the “Log” option under the “CSS” menu in the Console tab. Now, everytime a reflow happens, a log will be printed with the name of the JS function that triggered this reflow (if caused by JS).
That’s all for this time. Hope you like the new improvements!
About Paul Rouget
Paul is a Firefox developer.