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.

Inspector

You can now inspect ::before and ::after pseudo elements.  They behave like other elements in the markup tree and inspector sidebars. (35, development notes)

There is a new “Show DOM Properties” context menu item in the markup tree. (35, development notes, documentation about this feature on MDN)

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

We borrowed a useful feature from Firebug and are now allowing more paste options when right clicking a node in the markup tree.  (36, development notes, documentation about this feature on MDN)

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

DOM Promises are now inspectable. You can inspect the promises state and value at any moment. (36, development notes)

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)

WebIDE

You are now able to connect to Firefox for Android from the WebIDE.  See documentation for debugging firefox for android on MDN.  (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)

Network Monitor

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)

Here is a list of all the bugs resolved for Firefox 35 and all the bugs resolved for Firefox 36.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, add/vote for ideas on UserVoice or get in touch with the team at @FirefoxDevTools on Twitter.