Developer Edition 48 – Firebug features, editable storage, inspector improvements and more…

This week marks the release of Firefox Developer Edition 48. In preparation for the arrival of multiprocess Firefox and the deprecation of the Firebug add-on, we are porting Firebug features to the built-in tools. We have also made tweaks to the current tools that we’ll cover in this post.

Firebug theme

As part of porting Firebug features to the built-in tools, we’re also porting the Firebug theme, giving Firebug users a more familiar environment to work with. This is the initial release of the theme so please let us know if you find any bugs and report them here. Here is a screenshot of the Firebug theme:

Firebug theme

DOM panel

The DOM panel is another feature we are porting from Firebug. This panel provides a handy tree view which allows you to browse and inspect the DOM structure of your page. Here’s a screenshot of the new tool:

DOM Panel screenshot

Editable storage

Editing support inside the storage inspector is one of the most frequently requested features. In this release, we added the ability to edit and delete cookies, local storage, and session storage entries. You can edit a cell by double-clicking on it. You can also delete entries by using the context menu.
Editable storage entries

Deletable cells

Geometry editor

In this release, we have added a new visual editing tool that allows you to easily tweak the positioning of any absolutely positioned or fixed-position element. You can change the values of the top, left, bottom and right properties using this tool. To launch the geometry editor, go to the Box Model tab in the inspector and click on the Geometry editor icon icon.

Geometry Editor

Memory tool improvements

The memory tool is now enhanced with a brand new tree-map view that gives a quick and intuitive visual overview of how memory is being used. This new view groups objects together by their types, which allows you to easily see the quantity of similar items (arrays when drawing canvas lines, scripts when loading a script-heavy website, etc.) taking up memory. Also, the size of each item in the map is proportional to the amount of bytes used, which allows you to easily see which items are taking up most of your memory.

Memory tool tree map

The memory tool provides a useful aggregate view that groups all instances of the same type of node. In this release, you can now click the ⁂ icon to view all individual instances of a specified type in a separate view. You can also view the retaining paths of those individual nodes, using the retaining paths panel added in the previous release. This allows you to precisely pinpoint how a specific object is leaking when debugging your web app.

Aggregate view individual nodes

Finally, we have also added the ability to remove individual snapshots from the memory tool sidebar.

Inspector improvements

We have polished the user experience in the inspector to make it smoother and easier to use. The Rules view autocomplete now selects the most used property by default to make your authoring experience faster. For example, background will be selected instead of backface-visibility because it’s more frequently used. Here is a screencast of the feature in action:

Better rules view autocomplete

We have also improved the way long values are handled in the Rules view. A new multi-line mode specifically for long values lets you conveniently reach and select different parts of the value you’re editing.

Multi-line mode

The markup view now emphasises the relationship between a parent node and its children. The selected element now has a line underneath it that highlights the child nodes. This allows you to easily spot the selected element child nodes when the HTML markup is complex.

Parent child relationship

A quick way to switch between different angle units in the Rules view has been added. There is now a swatch next to angle values which you can shift-click to cycle between different units, similar to the colour values interaction. This feature was added by contributor Nicolas Chevobbe.

Cycle between angle units

Finally, we have added keyboard shortcuts to easily navigate between the markup view search results. You can now use Shift+Enter to navigate backwards within the search results. Also, Ctrl/Cmd+G and Ctrl/Cmd+Shift+G now work as aliases for Enter and Shift+Enter. These keyboard shortcuts were added by contributor Steve Melia.

Console improvements

The console has also received various tweaks that will make your daily experience with the tool more enjoyable. The first improvement comes from the set of Firebug features we’re porting. You can now expand network logs to inspect them and reveal a Firebug-style details view. Here is a screenshot:

Inline HTTP inspection

If you’re working with Map or Set objects, you can now view and inspect their individual entries from the console sidebar. This feature was added by contributor Jarda Snajdr.

Improved Map/Set inspection

Finally, we have added support for console.clear() to clear the console output.

about:debugging features

In preparation for the release of WebExtensions, we’ve added a feature that will be a great help to add-on developers. You can now reload add-ons from about:debugging, which allows you to quickly develop your add-on without having to re-install it every time you make a change.

Reloading add-ons with about:debugging

If you’re working with Service Workers, you’ll notice that we have added a way to unregister individual workers. Here is a screenshot:

Unregister service workers

Other notable changes

In addition to the changes above, we have polished various areas of the toolbox including:

Thanks to everyone who contributed to this release! Make sure to grab a fresh copy of Firefox Developer Edition and share your thoughts! If you have feedback about different Firebug features being ported, we’d love to hear your suggestions and constructive comments here.

About Tim Nguyen

Mozilla contributor who cares about the web and technology in general.

More articles by Tim Nguyen…


15 comments

  1. Kostas

    Thank you for this.
    Just a small correction: the relevant bug for “Switching between files in the debugger is now faster” is https://bugzilla.mozilla.org/show_bug.cgi?id=1233927

    May 2nd, 2016 at 14:04

    1. Tim Nguyen

      Thanks, good catch! I’ve updated the blog post with the correct bug number.

      May 2nd, 2016 at 14:43

  2. Šime Vidas

    “…allows you to browse and inspect the DOM structure of your page” – This sounds more like the Inspector panel. The DOM panel is more like a tree view of the global object, from what I can see.

    May 2nd, 2016 at 22:40

  3. Luca

    Hi,
    Great news!!! In the past I often used this site http://ffdevtools.uservoice.com/ to suggest new features but now is not available anymore and I didn’t find any news about it. I suggested many things to improve user experience but how to suggest them again?

    May 3rd, 2016 at 03:26

    1. Jeff Griffiths

      I apologize for any confusion – we removed the uservoice site due to lack of traffic, however previous suggestions were exported and archived. If you have any specific suggestions or bug reports with Developer Edition 48, please file a bug in bugzilla:

      https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools

      May 3rd, 2016 at 14:48

      1. jxn

        Is there any news on the top-rated item – live editing of javascript from the devtools? At the time, it sounded like it might come in Q4 of 2014, but I’ve heard nothing about it and cannot even find the tracking bug in bugzilla. I’d love to hear any update.

        May 8th, 2016 at 21:25

        1. Luca

          I also suggested many things and now I think that everything was lost… it’s a pity that is not possible to have another list in another website…

          May 9th, 2016 at 23:51

          1. Jens

            Bugzilla is full of great idea. Just look in the “Developer Tools” component or file a bug. But I agree that in bugzilla it’s much harder to find issues/ideas and no one really uses its voting system.

            May 24th, 2016 at 11:22

        2. Jens

          I guess this is it:
          Devtools frontend bug: https://bugzilla.mozilla.org/show_bug.cgi?id=894997 which depends on this backend bug: https://bugzilla.mozilla.org/show_bug.cgi?id=771339

          Also took my ages to find.

          I do not know if its lower priority than other bugs but at least you can follow it know.

          PS I must say that the uservoice was full of Spam and insults, so I guess it would have been lots of maintenance work in the end. The bug tracker is full of very useful ideas, it’s just not that easy to find things on bugzilla.

          May 24th, 2016 at 11:19

  4. Honza

    Well done Jarda Snajdr, well done! :-)

    May 3rd, 2016 at 08:25

  5. João Barreto

    Hi,

    One of the features I like the most in Firebug is the option to edit the HTML/CSS with the Inspector and see the changes reflected live on the web page you are working.

    Right now the changes only apply after finishing the edit.

    Will/can this be imported from Firebug ?

    Thank you all for your hard work :)

    May 3rd, 2016 at 08:55

  6. Jay

    awesome updates for my wowsome all time tool – firebug. :)

    May 5th, 2016 at 05:36

  7. Tom

    When are we going to see the developer tools in the mobile version for Firefox? (Please don’t mention anything “phony” in your reply.)

    May 16th, 2016 at 02:43

  8. Brian

    Thank you for your work! Editable storage is organized very well and easy to use.

    May 16th, 2016 at 14:04

  9. Brian

    Editable storage is really easy to use.

    May 16th, 2016 at 14:05

Comments are closed for this article.