Firefox 36 was just uplifted to the Developer Edition channel, so let’s take a look at the most important Developer Tools changes in this release. We will also cover some changes from Firefox 35 since it was released shortly before the initial Developer Edition announcement. There is a lot to talk about, so let’s get right to it.
You can now inspect ::before and ::after pseudo elements. They behave like other elements in the markup tree and inspector sidebars. (35, development notes)
The box model highlighter now works on remote targets, so there is a full-featured highlighter even when working with pages on Firefox for Android or apps on Firefox OS. (36, development notes, and technical documentation for building your own custom highlighter)
Shadow DOM content is now visible in the markup tree; note that you will need to set dom.webcomponents.enabled to true to test this feature (36, development notes, and see bug 1053898 for more work in this space).
Some more changes to the Inspector included in Firefox 35 & 36:
- Deleting a node now selects the previous sibling instead of the parent (36, development notes)
- There is higher contrast for the currently hovered node in the markup view (36, development notes)
- Hover over a CSS selector in the computed view to highlight all the nodes that match that selector on the page. (35, development notes)
Debugger / Console
The debugger now recognizes and works with eval’ed sources. (36, development notes)
Eval’ed sources support the
//# sourceURL=path.js syntax, which will make them appear as a normal file in the debugger and in stack traces reported by
Error.prototype.stack. See this post: http://fitzgeraldnick.com/weblog/59/ for much more information. (36, development notes, more development notes)
Console statements now include the column number they originated from. (36, development notes)
We also made some changes to improve the user experience in the WebIDE:
- Bring up developer tools by default when I select a runtime app / tab (35, development notes)
- Re-select project on connect if last project is runtime app (35, development notes)
- Auto-select and connect to last used runtime if available (35, development notes)
- Font resizing (36, development notes)
- You can now adding a hosted app project by entering the base URL (eg: “http://example.com”) instead of requiring the full path to the manifest.webapp file (35, development notes)
We added a plain request/response headers view to make it easier to view and copy the raw headers on a request. (35, development notes)
About Brian Grinstead
Brian is a Firefox engineer working on Developer Tools.