Developer Edition 54: New inspector and debugger features, MDN help in the netmonitor, and more

We didn’t have a chance to blog when Firefox Developer Edition 53 came out, so now that 54 is out too, let’s discover what new features and bugs fixes made it into these new releases.

There is a lot to cover so we will get right to it.

Inspector

The inspector now fully supports CSS color level 4, which means that new color syntax like hsl(120deg 100% 50%) is recognized in the CSS Rules panel.

People love our screenshot feature. In Developer Edition 53 we added a setting that, when turned on, will copy screenshots to your clipboard directly, so you can paste those images directly in other applications.

Firebug users used to be able to copy the full CSS path of any node in the inspector. This feature has now also been added to Firefox DevTools, as demonstrated here:

When nodes are collapsed in the inspector, it’s not possible to know whether they have children or not. A visual hint is displayed between the opening and closing tags as shown below:

Indicator between opening and closing tags in the inspector to show children exist

A lot of work was done to make the inspector faster and more reliable. In particular, the DOM tree now initializes with the DOMContentLoaded event.

The CSS Grid inspector, that can be toggled from the CSS rules panel, is now displayed for cases like display:inline-grid or display:grid !important.

Asynchronous Panning and Zooming (APZ for short) is the technology in Firefox that makes scrolling long pages super fast and smooth. Now, all the overlays that the inspector displays on web pages (like the box-model or the CSS grid lines) also benefit from it and scroll smoothly with the page.

In some situations, it may be hard to know that part of a property is overridden in a CSS rule. For instance, when only a longhand part of a shorthand property (e.g. margin-bottom in margin) gets overridden, the CSS rules panel didn’t show this unless you expand the shorthand property. This has changed, and the CSS rules panel now looks like this:

When only a part of a shorthand property is overridden

Right-clicking on an attribute in the inspector now gives you a menu item that lets you copy attribute values. (This is in addition to editing, adding, and deleting, which were already available.):

Copying attribute values in the inspector

Debugger

Our awesome new debugger front-end (available to our Nightly and Developer Edition users for now) gained a ton of new features in Firefox 54.

You can now add watch expressions in the right sidebar, which will be evaluated when you pause:

A lot of the UI state is saved between sessions now: Opened tabs, whether the sidebar is collapsed, the selected source, whether you want to pause on exceptions, etc., making it easier and much more intuitive to start debugging again.

The debugger now also supports collapsing the layout to a vertical mode when there isn’t enough space:

Code search is also much improved: Outlines are shown around matches, the total number of results is also displayed in the search bar, and a brand new function search option is now available:

The pretty-printing feature has been implemented, so you can now make those minified files much easier to read. Pretty-printing a source file opens the pretty version in another tab:

Finally, hovering over a variable in the source now pops-up a preview tooltip for this variable, and lets you see its value:

Storage

First a reminder: If you don’t see the Storage panel in DevTools, you’ll need to enable it first in the settings panel. (We will soon be working on a new way to open new tools.)

In the cookies section, multiple cookies with the same name are now shown correctly.

Local data stored by Web Extensions are now also displayed in the storage panel.

The IndexedDB storage type can now be seen in a new column. You can learn more about storage types on MDN.

Last, but definitely not least, the storage panel is now a lot faster when your Firefox browser profile has a lot of IndexedDB data in it.

Network Monitor

You might know that we spent a lot of last year migrating our tools away from XUL markup and Firefox-only JavaScript to standard HTML, CSS and JavaScript. (I blogged about this in January). Well, I’m really pleased to report that the Network Monitor is now part of that revamped tool set. It should be much easier to work on the panel if you have some HTML, CSS, and React experience.

We have also added some MDN documentation goodness in the Network Monitor. In particular, both HTTP status codes and HTTP response headers get [Learn More] links that will open relevant documentation pages on MDN:

There is now a new “transferred” size in the monitor’s toolbar that indicates how much data was really transferred over the wire (useful when data is compressed). As before, clicking on this label brings up the performance summary view, but now this view also includes the transferred size:

Responsive Design Mode

The dimension controls have been moved above the viewport so they’re easier to see and use:

We also added the ability for users to enter their own custom devices to the list of pre-defined devices:

JSON Viewer

The JSON Viewer has been around on our Nightly and Developer Edition channels for a while.
With Firefox 53, we enabled it on all channels. This means that if you run the standard release of Firefox, very soon JSON responses in tabs will be much easier to read and explore:

The JSON Viewer is now displayed for files with the application/manifest+json mime-type.

New Web Extensions API for DevTools

WebExtensions are Firefox’s new way to write extensions for the browser that are compatible to a large extent with Google Chrome and Opera.

Firefox now supports new DevTools-related WebExtensions APIs, which means that Chrome DevTools extensions are going to start working with Firefox too!

In particular, it is now possible to create new DevTools panels with the devtools.panels.create API, or even execute code in the content window with the devtools.inspectedWindow.eval API.

We created a GitHub repository that provides examples of how to build WebExtensions using the DevTools API.

Right-to-Left Layout Improvements

Many RTL (right-to-left) improvements were made in these last couple of releases.

The settings panel now fully supports RTL, the computed styles panel in the inspector also works better with RTL, the JSONViewer now supports it, the DOM panel also received some RTL love, and finally RTL support also came to the font panel in the inspector.

More Bug Fixes

The Firebug theme received a variety of fixes and now works much better for our Mac and Linux users (in particular font-size, some padding, breadcrumbs, and various colors were fixed).

The icon for the new Responsive Design Mode in the toolbar was changed. It was confusingly similar to the docking icon, and is now easier to find:

Finally, all the buttons shown in the toolbar now display the corresponding keyboard shortcuts on hover!

Thank You!

Many volunteer contributors have helped fix bugs and implement new features in these releases, so warm thank yous to all (in no particular order)!:

  • Kimberly Pennington
  • Yann Gravrand
  • Tomer Cohen
  • Micah Tigley
  • Jaideep Bhoosreddy
  • Tooru Fujisawa
  • Thomas Dräbing
  • Adrien Enault
  • Iulian Radu
  • Ruturaj Vartak
  • Rahul Chaudhary
  • Oliver Scheiwiller
  • Tim Nguyen
  • Bao Quan
  • Nick Fox
  • Eduardo Bouças
  • Leonardo Couto
  • Kerem Kat
  • Ken Lee
  • Cosm
  • Jarda Snajdr
  • Florian Apolloner
  • Fabien Casters
  • Deepjyoti Mondal
  • Dalimil Hajek
  • Nicolas Chevobbe
  • Taylor Alexander Brown
  • Michael Brennan
  • André Bargull
  • Sébastien Blin
  • Ajay Krishna
  • Ahmed Towkir

You can see the full list of bugs if you’re interested.

As always, let us know what you think about this. You can add a comment right here, file a bug if you notice something wrong, or discuss new ideas or ask for help on our Discourse forum.

About Patrick Brosset

Patrick manages the DevTools engineering team at Mozilla

More articles by Patrick Brosset…


14 comments

  1. maxm

    Nice! Good job!
    But what about multiline js console in dev tools?
    What about editing width and height in box model?

    March 30th, 2017 at 08:29

    Reply

    1. Patrick Brosset

      Thanks!
      Editing width and height will be available in the next release (55, which is already in Nightly). It was fixed in this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1061823
      The console already supports a form of multiline editing: either press shift-enter to go to the next line, or, if you’re typing an expression that is not “finished”, pressing enter will just go to the next line, as shown here: https://www.youtube.com/watch?v=TTFPulFYb48

      March 30th, 2017 at 08:36

      Reply

      1. maxm

        An this will be all in topic of multiline console? What abou implementing Code Mirror. Something like was in Firebug? Honestly this auto multiline mode is not very useful. Small letters in left corner of the screen, notr very readable :/ The best solution was console side by side with editor (now maybe sracthpad?)

        Copy full CSS path rocks :)

        March 30th, 2017 at 09:10

        Reply

      2. Will

        Firebug’s “Large Command Line” was really a delight when testing quick multi-line stuffs without needing to think about “Shift or not to Shift”.

        March 30th, 2017 at 13:39

        Reply

        1. Patrick Brosset

          I agree. I think the closest thing to this in DevTools now is Scratchpad: https://developer.mozilla.org/en-US/docs/Tools/Scratchpad
          Note that you can have it in a separate tab inside DevTools, and you can also open the split console below that so you get a nice multi-line input, as well as the console as the output: https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Split_console

          Now, we did discuss adding multi-line support in the console, just like Firebug had, in this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1133849
          But it never got prioritized over other things we have been doing. Feel free to comment and vote on this bug!

          March 31st, 2017 at 00:34

          Reply

      3. vflash

        Need a console in the style of firebug

        March 30th, 2017 at 13:48

        Reply

        1. Albert

          See this related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1124677 … vote and comment :)

          April 6th, 2017 at 00:34

          Reply

  2. Sachin

    This is amazing. I’ve been wanting these debugging features for ages. Great job. I love this.

    March 30th, 2017 at 10:30

    Reply

  3. Will

    Amazing work. Thank you to all of the contributors!

    March 30th, 2017 at 13:39

    Reply

  4. duc4231

    Great article :D

    March 30th, 2017 at 20:21

    Reply

  5. drumpf400

    Great work. I always love reading those DevTools blog posts and getting up-to-date with whats new.
    Please start working on showing all requests in NetMonitor.
    fe. https://bugzilla.mozilla.org/show_bug.cgi?id=1348983
    Thanks

    March 31st, 2017 at 06:21

    Reply

  6. Luke

    “DOM tree now initializes with the DOMContentLoaded event.” – Am I missing something here? Why would it not have read on domcontentloaded, that is the first event where all of the html is ready to parse? When did it start up the element inspector before??

    March 31st, 2017 at 18:21

    Reply

    1. Patrick Brosset

      No you’re not missing anything, it just used to listen to the load event. It doesn’t anymore, so that’s great!

      April 3rd, 2017 at 00:50

      Reply

  7. Wellington Torrejais

    Nice!

    April 3rd, 2017 at 04:31

    Reply

Post Your Comment