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.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Editable box model, multiple selection, Sublime Text keys + much more – Firefox Developer Tools Episode 31

A new set of the Firefox Developer Tools features has just been uplifted to the Aurora channel. These features are available right now in Aurora, and will be in the Firefox 31 release in July. This release brings new tools, editor improvements, console and inspector features:

Editable box model

The Box Model tab in the Inspector is now editable for easy experimentation. Double-click any of the margin, border, or padding values to change its value for the currently selected element. Enter any valid CSS <length> value and use the Up/Down keys to increment or decrement the value by 1. Alt-Up increments by 0.1 and Shift-Up increments by 10. (development notes)

Editing the box model


New to the color picker in the Inspector is an Eyedropper tool that grabs the color from any pixel on the page. Select the current color by clicking or pressing Enter. Abort the operation by pressing Esc. Use the Up/Down keys to move by one pixel, and Shift-Up/Shift-Down to move by 10 pixels.

Eyedropper tool

You can also use the eyedropper directly to copy a color to the clipboard by accessing it from Web Developer menu, or the toolbar icon that’s enabled by going to the settings panel and checking Available Toolbox Buttons > Grab a color from the page. (development notes)

Console stack traces

console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made. (development notes)

Stack trace in console.error() printout

Styled console logs

On parity with other browser developer tools, you can now add style to console logging with the %c directive.
(development notes)

Using %c in console.log() to format output

Copy as cURL

Replay any network request in the Network Monitor from the comfort of your own terminal. Right-click a request and select the copy as cURL menu item to copy a cURL command to the clipboard, including arguments for headers and data. (development notes)

Copy as cURL in Network tool

Editor – multiple selection, Sublime Text keys

The source editor used in the developer tools has been upgraded to Codemirror 4. With that brings:

Multiple selection. Hold down Ctrl/Cmd while selecting to get multiple selections.
* Rectangle selection. Hold down Alt to select a column-aligned block of text.
* Undo selection. Undo the last selection action with Ctrl-U/Cmd-U and redo with Alt-U/Shift-Cmd-U.
* Sublime Text keybindings. To enable, go to about:config in the url bar and set devtools.editor.keymap to sublime.

Multiple selection in action:

animation of multiple selection in the editor

development notes

Canvas Debugger

Debug animation frames in WebGL and 2d canvas contexts with the newly-landed canvas debugger. The canvas debugger is an experimental feature that has to be enabled in the setting panel. Multiple canvases are not yet supported (bug) as well as animations generated with setInterval (bug). The canvas debugger is described in more in this blog post.
(development notes)

Add-on Debugger

If you develop Firefox add-ons using the Add-on SDK, there’s now a much easier way to debug your add-on’s JavaScript modules. See the blog post for more details. (development notes)

Firefox 31: Add-on Debugger from Jordan Santell on Vimeo.

Other features

  • Expand descendants. Hold Alt while double-clicking a node in the Inspector to expand all of its children and descendants. (development notes)
  • Persist network logs. Check Enable persistent logs in the settings panel to keep Network panel logs across reloads and navigations. (development notes)
  • JS warnings on by default. JavaScript warnings now show up in the Console by default. (development notes)
  • Scratchpad View menu. The Scratchpad tool now has a View menu with options for changing font size, hiding line numbers, wrapping text, and highlighting trailing spaces. (development notes)

Special thanks to the 38 contributors that added all the features and fixes in this release.

Questions or suggestions? Comment here or shoot feedback to @FirefoxDevTools on Twitter or our brand new feedback channel for Firefox Developer Tools. If you’d like to help out, check out the guide to getting involved.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)