The DevTools also have a context menu option for that named Add New Rule and additionally have a button within the Rules panels toolbar to create new rules.

The following list aims to help Firebug users to find their way into the Developer Tools.

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.

That means, that when you open the DevTools in a tab, they stay open even when you switch between different websites.

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.

It shows log information associated with a web page and allows you to execute JavaScript expressions via its command line.

The Developer Tools console offers similar functionality via the filter buttons inside its toolbar centralized at one place.

The Developer Tools command line has some functions in common, but also has some other functions and misses others.

In the DevTools this option is called Enable persistent logs and is available within the Toolbox Options panel.

This functionality is already integrated into the DevTools using the ChromeLogger protocol and doesnt require any extensions to be installed.

This option is also available within the DevTools Web Console via the Net XHR.

Furthermore, the Web Console even allows to display all other network requests via Net Log.

The DevTools Web Console shows those structures directly under the Response tab.

The DevTools do not have a side panel like the Command Editor (which is requested in bug 1133849 ), but therefore has a separate tool called Scratchpad, which can be added as panel to the toolbox or opened in a separate window via Firefox menu Developer Scratchpad or Shift F4.

Also, the normal command line smartly enters a line break when it recognizes an unfinished command like document.

It is currently missing the preview for HTML, XML and SVG, though, which is tracked in bug 1247392 and bug 1262796, but when you click on the URL of the request you switch to the Network Monitor, which has a Preview tab.

Within the DevTools this functionality is served by the Page Inspector.

In Firebug you do this by right-clicking a node and clicking Edit HTML.

In the DevTools this option is also available via the context menu.

Only the live preview of changes is currently missing, which is tracked in bug 1067318 and bug 815464.

Firebug has a Style side panel for this, the DevTools have a Rules side panel.

Firebug Lite For Chrome Mac