Edit

Firefox Developer Tools: Episode 27 – Edit as HTML, Codemirror & more

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.

Inspector improvements

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 no 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

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!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)