Developer Edition 40: Always active network monitoring, CSS rules filtering, and much more

Firefox 40 was just uplifted, and we have a lot of updates to share. This release took a major effort by Developer Tools contributors to address feedback we’ve heard directly from people using our tools. Grab a copy of the Developer Edition browser and check it out.

Experimental Multi-process Support: A Request

When you update to Developer Edition 40, you’ll be prompted to opt in to test multi-process Firefox. Please consider helping us test this new feature and providing feedback around any issues you see.

New in the Inspector

  • There is now a filter box in the CSS Rules view that lets you find rules that match a string. See the Filter Styles screencast or the screenshot below. (Development notes: 1120616 and 1157293.)

Inspector Filter Styles Screenshot

  • There is a new CSS documentation tooltip for CSS properties. Right click on any property in the CSS Rules view and select “Show MDN Docs” to see more information about that property. (Development notes.)

MDN Tooltip In Inspector Screenshot

  • Inspector search now includes results from iframes and also includes class / id results without the CSS prefix. (Development notes: 873443 and 1149346.)
  • There is a new CSS Filter Editor Tooltip added by Mahdi Dibaiee. Check out the CSS Filter Editor Tooltip screencast for a demo, or try it on the filter demos page in Developer Edition. (development notes)
  • The Animation Inspector has had some major updates. It now shows subtree animations, playback rate can be controlled, and it previews and highlights animated DOM nodes. (Development notes: 1155651, 1155653, and 1144615.)

There are too many changes to list in this post, but here are a few more interesting updates you may come across in the Inspector:

  • The Box Model view has legends for the regions and tooltips to show which CSS rule invoked the computed value. (Development notes: 1141571 and 1151956.)
  • shift+clicking a color swatch switches between color unit formats in place. (Development notes.)
  • New Scroll Into View, Open Link in New Tab, Copy Link, Open In Style Editor, and Open in Debugger context menu items in the Markup View. (Development notes: 901250, 921102, and 1158822.)

Network Monitor News

Cached network requests in Network Monitor Screenshot

Here’s a selection of other changes and improvements in this release:

  • New Copy Response, Copy URL parameters, and Copy Request/Response Headers context menu items on each request. (Development notes: 955933, 1150717, and 1150715.)
  • Search box to filter requests. (Development notes.)
  • IP address included in Domain tooltip for network monitor. (Development notes.)
  • Added access keys to the request context menu. (Development notes.)

Web Console

  • New console method: console.dirxml(). (Development notes.)
  • New filter options in the web console to show console messages from workers. (Development notes.)
  • Quotes in strings are no longer added if logged via console.log. Thanks to new contributor Dmitry Sagalovskiy for adding this feature! (Development notes.)

Debugger

General

Special thanks to all the people who contributed patches to Firefox Developer Tools this release! Here is a list of all the DevTools bugs resolved for Firefox 40. Kudos to the many contributors.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, get in touch with the team at @FirefoxDevTools, or share your constructive feedback and feature requests on our Firefox Dev Tools feedback channel.

About Brian Grinstead

More articles by Brian Grinstead…


7 comments

  1. Jerry

    Doesn’t chrome tools devs have much of these features already and even better?

    May 20th, 2015 at 10:28

    1. Brian Grinstead

      This release the focus has been on direct feedback we’ve gotten from users while improving stability and polish across the tools. Even still, there are things from this release you don’t get in other browsers – like the built in documentation for CSS properties, animation panel, filter editor, etc.

      Check out Developer Edition and send over any feedback or new feature ideas that you have!

      May 20th, 2015 at 11:07

    2. Kamal Bhatt

      I don’t use chrome day to day, so this could be harsh, but when I have had to use it to debug a problem, I have found the Chrome tools sometimes lacking.

      I find the profiling tools somewhat better in Firefox, and the JS error messages are a lot better in Firefox. Try intentionally breaking your JS code and see the differences.

      With this release, I think I am going to switch off firebug.

      May 22nd, 2015 at 16:34

      1. jsantell

        That’s great! Let us know always what we can do to continue improving the Firefox DevTools!

        May 24th, 2015 at 13:08

  2. Brian Grinstead

    Also, one note that didn’t get mentioned in the post is that the Dev Edition browser theme has now been converted to a Lightweight Theme (http://bugzil.la/1148996).

    While this shouldn’t change anything about the way it looks, it does mean that it’s better integrated into the browser. So you can now enable and disable it from about:addons or customize mode, just like any other theme.

    May 20th, 2015 at 10:43

  3. Nate Wiebe

    I’d still like to see a tab for viewing a request response in plain text. Ideally being able to select portions and copy it to the clipboard. If Firefox thinks it’s json and finds a syntax error, I can’t see the response to fix it.

    May 26th, 2015 at 05:16

    1. Jeff Griffiths

      As a workaround you can right-click on a request and copy the response string. I agree we should also provide the raw response – we’re tracking that issue in this bug:

      https://bugzilla.mozilla.org/show_bug.cgi?id=1135965

      May 27th, 2015 at 19:50

Comments are closed for this article.