Prettyblog280

Mozilla launched a redesign of the about:config page in Firefox 71. All it takes is to load the address in the browser's address bar to get started. The list is a treasure trove for advanced users who like to modify browser settings that cannot be changed using the built-in settings. Mozilla Autoconfig (aka. Mission Control) allows administrators to centralize configuration and management of Mozilla Firefox. Settings specified via autoconfig can be changed at any time and are automatically applied when Mozilla Firefox starts up. Writing Configuration Files. Autoconfig configuration files are Javascript files (aka ECMAScript. Different versions of OpenSSH support different options which are not always compatible. This guide shows settings for the most commonly deployed OpenSSH versions at Mozilla - however, using the latest version of OpenSSH is recommended. Modern (OpenSSH 6.7+) File: /etc/ssh/sshdconfig. Browser settings make it possible for each of us to customize our browsing experience on the Internet. Some people want to shield themselves or their children from adult content, some are concerned about privacy or security issues, and others are picky about the program the browser uses to display PDF files.

Opening Settings

Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the ellipsis) on the right of the tab.

The menu includes settings to control the location of the Developer Tools. You can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. These settings are particularly useful if you have a widescreen monitor. You can also choose to open the tools in a separate window.

Show split console adds a section at the bottom of the tools showing the console. It makes visible the command line and one or two lines of the console output.

The rest of the settings are on the Developer Tools Settings Pane. To see the settings, open any of the Developer Tools, and then:

• click the 'Settings' command in the menu:
• or press F1 to toggle between the active tool and the Settings pane

The Settings pane looks something like this:

Categories

Default Firefox Developer Tools

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

Available Toolbox Buttons

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

As of Firefox 62, if the option to 'Select an iframe as the currently targeted document' is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes.

Note that in Firefox 52 we removed the checkbox to toggle the 'Select element' button. The 'Select element' button is now always shown.

Themes

This enables you to choose one of two themes.

• There's a light theme, which is the default:

• A dark theme (the default on Firefox Developer Edition):

Common preferences

Settings that apply to more than one tool. There's just one of these:

Enable persistent logs

A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.

If Common Preferences is not included in the Settings, Web Console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true

Inspector

Show browser styles

A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the 'Browser styles' checkbox in the Inspector's Computed view.

Truncate DOM attributes

By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference 'devtools.markup.collapseAttributes'. To change the threshold at which attributes are truncated, you can edit the about:config preference 'devtools.markup.collapseAttributeLength'.

Default color unit

A setting to control how colors are represented in the inspector:

• Hex
• HSL(A)
• RGB(A)
• color name
• As authored.

Enable layout panel

Enable the experimental layout panel. This setting only exists in Firefox Nightly.

Web Console

Debugger

Style Editor

Screenshot Behavior

Editor Preferences

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

Detect indentation

Auto-indent new lines based on the current indentation.

Autoclose brackets

Determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you.

Indent using spaces

When checked, indentation will be performed using spaces, when off, the editor will use tabs instead.

Mozilla Config File

Tab size

The frequency of tab stops in the editor. Select 2, 4, or 8.

Keybindings

Choose the default CodeMirror keybindings or keybindings from one of several popular editors:

• Vim
• Emacs
• Sublime Text

Advanced settings

Show Gecko platform data

A setting to control whether or not profiles should include Gecko platform symbols.

Disable HTTP Cache

Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option.

Disable JavaScript

Reload the current tab with JavaScript disabled.

Enable Service Workers over HTTP

Enable Service Worker registrations from insecure websites.

Enable browser chrome and add-on debugging toolboxes

Enable you to use developer tools in the context of the browser itself, and not only web content.

Enable remote debugging

Enable the developer tools to debug remote Firefox instances.

Enable worker debugging

Enable a panel within the debugger to debug workers.

Note: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.

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:

1. 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).
2. 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:

Mozilla Config Generator

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.

How To Access Firefox Settings

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:

• 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

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):

Mozilla Config Url

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.

Mozilla Configuration

Modifying the browser UI

Since the global window 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:

How To Open About Config

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