Mozilla Firefox Developer Tools

29-04-2021

Mozilla Firefox Developer Tools

Mozilla Firefox React Developer Tools
Where Is Tools Mozilla Firefox
Mozilla Firefox Developer Tools
Mozilla Firefox Developer Tools Shortcut

Firefox Browser Developer Edition The browser made for developers All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector. A separate profile and path so you can easily run it alongside Release or Beta Firefox. From the menu: select 'Browser Console' from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS). From the keyboard: press Ctrl + Shift + J (or Cmd + Shift + J on a Mac).

Firefox Developer Tools The Core Tools. You can open the Firefox Developer Tools from the menu by selecting Tools Web Developer Toggle Tools. These developer tools are also built into Firefox. Unlike the 'Core Tools' above, you might not use them. Connecting the Developer Tools.
A VS Code theme based on the Mozilla Firefox' developer tools colors. Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Copied to clipboard. Overview Version History Q & A Rating & Review. Firefox Theme for VS Code A VS Code theme based on Mozilla Firefox' developer tools.

The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android. See remote debugging to learn how to connect the debugger to a remote target.

To find your way around the debugger, here's a quick tour of the UI.

How to

To find out what you can do with the debugger, refer to the following how-to guides.

Pause execution

You probably want to pause the execution of your code, in order to see what is going on at various points. There are multiple ways to tell the Debugger how and when to pause:

Control execution

What can you do after execution pauses?

Look at values

You probably want to see the value of variables or expressions, either during execution or when it is paused.

Reference

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.

If you also want to use the other web developer tools in the regular Web Toolbox with add-on or browser code, consider using the Browser Toolbox.

Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.

NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the 'Enable browser chrome and add-on debugging toolboxes' (Firefox 40 and later) option in the developer tool settings.

Opening the Browser Console

You can open the Browser Console in one of two ways:

from the menu: select 'Browser Console' from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).
from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).

You can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

The Browser Console looks like this:

You can see that the Browser Console looks and behaves very much like the Web Console:

most of the window is occupied by a pane that display messages.
at the top, a toolbar enables you to filter the messages that appear.
at the bottom, a command line interpreter enables you to evaluate JavaScript expressions.

Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled Show Content Messages. The following image shows the browser console focused on the same page as above after clicking on the Show Content Messages checkbox.

Browser Console logging

The Browser console logs the same sorts of messages as the Web Console:

Mozilla Firefox React Developer Tools

Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the console API)
Input/output messages: commands send to the browser via the command line, and the result of executing them

However, it displays such messages from:

web content hosted by all browser tabs
the browser's own code
add-ons

Messages from add-ons

The Browser Console displays messages logged by all Firefox add-ons.

`Console.jsm`

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

One exported symbol from Console.jsm is console. Below is an example of how to access it, which adds a message to the Browser Console.

Learn more:

HUDService

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla DXR. We see we can not only access the Browser Console but also Web Console.

Here is an example on how to clear the contents of the Browser console:

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the 'Clear' button it will clear the Browser Console:

Bonus Features Available

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled 'Error!' in the Add-on bar:

Click the icon. You'll see output like this in the Browser Console:

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ('log-error'), making it easy to find all messages from this add-on using the 'Filter output' search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

Browser Console command line

The Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the 'Enable chrome debugging' option in the developer tool settings.

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

Controlling the browser

Where Is Tools Mozilla Firefox

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

Note: You can restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.