Opening the Browser Console

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

1. from the menu: select “Browser Console” from the Browser Tools submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).

2. from the keyboard: pressCtrl +Shift +J (orCmd +Shift +J on a Mac).

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

/Applications/FirefoxAurora.app/Contents/MacOS/firefox-jsconsole

The Browser Console looks like this:

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

• most of the window is occupied by apane that display messages

• at the top, atoolbar enables you to filter the messages that appear.

• at the bottom, acommand 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 labeledShow Content Messages. The following image shows the browser console focused on the same page as above after clicking on theShow Content Messages checkbox.

Browser Console logging

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

• HTTP requests

• Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using theConsole 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

const{console}=ChromeUtils.importESModule("resource://gre/modules/Console.sys.mjs");console.log("Hello from Firefox code");//output messages to the console

Browser Console command line

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 variouskeyboard shortcuts andhelper 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 evaluatingwindow:

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.

varnewTabBrowser=gBrowser.getBrowserForTab(gBrowser.selectedTab);newTabBrowser.addEventListener("load",function(){newTabBrowser.contentDocument.body.innerHTML="<h1>this page has been eaten</h1>";},true);newTabBrowser.contentDocument.location.href="https://mozilla.org/";

Modifying the browser UI

Since the globalwindow object is the browser’s chrome window, you can also modify the browser’s user interface. On Windows, the following code will add a new item to the browser’s main menu:

varparent=window.document.getElementById("appmenuPrimaryPane");varmakeTheTea=gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","menuitem");makeTheTea.setAttribute("label","A nice cup of tea?");parent.appendChild(makeTheTea);

On macOS, this similar code will add a new item to theTools menu:

varparent=window.document.getElementById("menu_ToolsPopup");varmakeTheTea=gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","menuitem");makeTheTea.setAttribute("label","A nice cup of tea?");parent.appendChild(makeTheTea);