Migrating from Firebug

This article is a stub--an article which is only partly developed. Please help to develop it.

When migrating from Firebug to the Firefox Developer Tools, you may wonder where the features you loved in Firebug are available in the Developer Tools. The following list aims to help Firebug users to find their way into the Developer Tools.

General

Activation

Firebug's activation is URL based respecting the same origin policy. That means that when you open a page on the same origin in a different tab, Firebug gets opened automatically. And when you open a page of a different origin in the same tab, it closes automatically. The DevTools' activation on the other hand is tab based. That means, that when you open the DevTools in a tab, they stay open even when you switch between different websites. When you switch to another tab, though, they're closed.

Open the tools

Firebug can be opened by pressing F12. To open it to inspect an element it is possible to press Ctrl+Shift+C / Cmd+Opt+C. The DevTools share the same shortcuts, but also provide shortcuts for the different panels. E.g. the Network Monitor can be opened via Ctrl+Shift+Q / Cmd+Opt+Q, the Web Console via Ctrl+Shift+K / Cmd+Opt+K and the Debugger via Ctrl+Shift+S / Cmd+Opt+S.

Web Console

The Web Console is the equivalent of Firebug's Console panel. It shows log information associated with a web page and allows you to execute JavaScript expressions via its command line. The display between both is somewhat different. This may be changed in bug 1269730.

Filter log messages

Firebug offers two ways to filter log messages, via the options menu and via the filter buttons within the toolbar. The Developer Tools console offers similar functionality via the filter buttons inside its toolbar — centralized at one place.

Command Line API

The Command Line API in Firebug provides some special functions for your convenience. The Developer Tools command line has some functions in common, but also has some other functions and misses others.

Console API

To log things to the console from within the web page Firebug makes a Console API available within the page. The Developer Tools share the same API, so your console.* statements will continue to work.

Persist logs

In Firebug you can click the Persist button within the toolbar to keep the logged messages between page navigations and reloads. In the DevTools this option is called Enable persistent logs and is available within the Toolbox Options panel.

Server logs

Firebug extensions like FirePHP allow to log server-side messages to the Firebug console. This functionality is already integrated into the DevTools using the ChromeLogger protocol and doesn't require any extensions to be installed.

Command history

The command history available through a button in Firebug's command line, is available by pressing / within the DevTools command line.

Inspect object properties

By clicking on an object logged within the console you can inspect the object's properties and methods within the DOM panel. In the Firefox DevTools you can also inspect the objects. The difference is that they show the properties and methods within a side panel inside the Web Console.

View JSON and XML structures

To view JSON and XML responses of AJAX requests, Firebug has special tabs when expanding the request within the Console panel. The DevTools' Web Console shows those structures under the directly under the "Response" tab.

Inspector

Firebug has an HTML panel, which allows to edit HTML/XML/SVG and the CSS related to it. Within the DevTools this functionality is served by the Page Inspector.

Edit HTML

Within the Page Inspector the tag attributes and the contents can be edited inline just like in Firebug. Beyond that it allows to edit the tag names inline.

You can also edit the HTML directly. In Firebug you do this by right-clicking a node and clicking Edit HTML... in the context menu. In the DevTools this option is also available via the context menu. There the option is called Edit As HTML.

Firebug's HTML panel allows to copy the inner and outer HTML of an element as well as the CSS and XPath to it via the context menu of an element. The Page Inspector provides the same functionality except copying XPaths. This is covered by bug 987877.

Edit CSS

Both tools allow to view and edit the CSS rules related to the element selected within the node view in a similar way. Firebug has a Style side panel for this, the DevTools have a Rules side panel.

In Firebug you add new rules by right-clicking and choosing Add Rule... from the context menu. The DevTools also have a context menu option for that named Add New Rule and additionally have a + button within the Rules panel's toolbar to create new rules.

To edit element styles, i.e. the CSS properties of the style attribute of an element, in Firebug you have to right-click into the Style side panel and choose Edit Element Style... from the context menu. The DevTools display an element {} rule for this purpose, which requires a single click into it to start editing the properties.

Copy & paste CSS

Firebug's Style side panel as well as the DevTools' Rules side panel provide options within their context menus to copy the CSS rule or the style declarations. The DevTools additionally provide an option to copy the selector of a rule and copy disabled property declarations as commented out. They are missing the option to copy the whole style declaration, though this can be achieved by selecting them within the panel and copying the selection by pressing Ctrl+C or via the context menu.

The Rules side panel of the DevTools is smarter when it comes to pasting CSS into it. You can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled.

Toggle pseudo-classes

Firebug lets you toggle the CSS pseudo-classes :hover, :active and :focus for an element via the options menu of the Style side panel. In the DevTools there are two ways to do the same. The first one is to toggle them via the pseudo-class panel within the Rules side panel. The second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu.

Examine CSS shorthand properties

CSS shorthand properties can be split into their related longhand properties by setting the option Expand Shorthand Properties within the Style side panel. The DevTools' Rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them.

Inspect box model

In Firebug the box model can be inspected via the Layout side panel. In the DevTools the box model is part of the Computed side panel. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them. Only the width and height of an element can't be adjusted yet (see bug 1061823). And the display and box-sizing values are not shown yet (see bug 1292051).

Inspect computed styles

The computed values of CSS properties are displayed within the DevTools' Computed side panel like within Firebug's Computed side panel. The difference is that in the DevTools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the Mozilla specific styles, therefore there is an input field allowing to filter the properties.

Inspect events

Events assigned to an element are displayed in the Events side panel in Firebug. In the DevTools they are shown when clicking the small 'ev' icon besides an element within the node view. Both tools allow to display wrapped event listeners (e.g. listeners wrapped in jQuery functions). To improve the UI of the DevTools, there is also a request to add an Events side panel to them like the one in Firebug (see bug 1226640).

Stop script execution on DOM mutation

In Firebug you can break on DOM mutations, that means that when an element is changed, the script execution is stopped at the related line within the JavaScript file, which caused the change. This feature can globally be enabled via the Break On Mutate button, or individually for each element and for different types of changes like attribute changes, content changes or element removal. Unfortunately, the DevTools do not have this feature yet (see bug 1004678). To stop the script execution there, you need to set a breakpoint on the line with the modification within the Debugger panel.

Search for elements via CSS selectors or XPaths

Firebug allows to search for elements within the HTML panel via CSS selectors or XPaths. Also the DevTools' Inspector panel allows to search for CSS selectors. It even displays a list with matching IDs or classes. Searching by XPaths is not supported though (see bug 963933.

Debugger

What's the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.

Switch between sources

Firebug has a Script Location Menu listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new Function(), etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the Sources side panel. Dynamically generated scripts are only listed there when they are named via a //# sourceURL comment.

Managing breakpoints

In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the Sources side panel. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see bug 821610, bug 1004678, bug 895893 and bug 1165010). While there are no breakpoints for single JavaScript errors, there is a setting Pause on Exceptions within the Debugger panel options.

Step through code

Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.

Examine call stack

When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the Call Stack side panel. To see the call parameters in the DevTools, you need to have a look at the Variables side panel.

Examine variables

The Watch side panel in Firebug displays the window object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a Variables side panel, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. Though you can inspect that object either via the DOM property viewer or via the Web Console.

Style Editor

The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's CSS panel does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.

Switch between sources

The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a sidebar for this purpose.

Edit a style sheet

Firebug's CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a Source and a Live Edit mode, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.

Performance Tool

Firebug allows to profile JavaScript performance via the "Profile" button within the Console panel or the console.profile() and console.profileEnd() commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via console.profile() and console.profileEnd() like in Firebug or via the "Start Recording Performance" button in the Performance Tool. The output of the Call Tree is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.

Network Monitor

To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.

Storage Inspector

The Cookies panel in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the Storage Inspector. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and IndexedDB databases.

Document Tags and Contributors

Tags: 
 Contributors to this page: curtisgibby, Sebastianz, Sole, wbamberg
 Last updated by: curtisgibby,