The Developer Toolbar gives you command-line access to a number of developer tools from within Firefox. It is a Graphical Command Line Interpreter that provides integrated help for its commands and displays rich output with the power and conciseness of a command line. It is also extensible: you can add your own local commands and even convert them into add-ons so that other people can install them too.
Opening the Developer Toolbar
To open the Developer Toolbar, press Shift+F2, or go to the Web Developer menu (which is a sub-menu in the Tools menu on OS X and Linux) and select "Developer Toolbar". It will appear at the bottom of the browser, like this:
The command-line prompt takes up most of the toolbar, with a "Close" button on the left and a button to toggle the Toolbox on the right.
Apart from the "Close" button, either pressing Shift+F2 or selecting the "Developer Toolbar" menu item will toggle the toolbar off.
Using the command line
Like a normal command line, you execute commands by typing them at the prompt and pressing Enter.
As you type, the Developer Toolbar will suggest possible completions to your command:
If there is more than one possible completion, the Up and Down arrow keys will cycle through the suggestions. Pressing Tab will select the current suggestion.
Pressing F1 will display all the suggestions in a list, with a summary of what each command will do:
Typing "help" will show a list of all commands:
Typing "help <command>" will give you the help for <command>:
Commands
Since the Developer Toolbar provides built-in help for the commands it supports, we have not provided complete documentation for the supported commands here. To get complete documentation for <command>, type "help <command>" into the toolbar.
| Developer Toolbar Command | Command Definition |
|---|---|
| addon | List all installed add-ons, disable or enable a specific add-on. |
| appcache | View and manipulate appcache entries. |
| break | List, add, and remove breakpoints. |
| calllog | Log function calls to the Console. |
| connect | Connect to a remote server: subsequent commands will be run on the server. |
| console | Open, close, and clear the Console. |
| context | Add a prefix to future commands. |
| cookie | List, remove, and set cookies. |
| dbg | Commands to control the Debugger. |
| disconnect | Disconnect from a remote server. |
| edit | Edit one of the resources loaded by the page. |
| export | Export the page. |
| folder | Open a folder in your system's file explorer, using its path syntax. folder openprofile opens your profile. |
| help | Show all available commands. |
| highlight | Given a selector, highlight all the nodes that match the selector. |
| inject | Inject a library like jQuery or underscore into the page. |
| inspect | Examine a node in the Inspector. |
| jsb | Pretty-print a JavaScript file. |
| listen |
Enable remote debugging: start listening to TCP connections from the debugger. From Firefox 51, this command take an additional |
| mdn |
"mdn css [property]" gives summary documentation from MDN for the given property, and provides a link to the MDN page for the property. |
| media | Emulate the given media type for the current page. |
| pagemod | Remove and replace attributes and elements in the current page. |
| paintflashing | Switch paint flashing on and off. |
| pref | Set, reset, and display preferences. |
| profiler | Start/stop profiling, and open/close the Profiler. |
| resize | Control Responsive Design View. |
| restart | Restart the browser. |
| rulers |
Toggle rulers for the page. |
| screenshot | Take a screenshot. |
| security | Displays information about security features for the current domain. |
| tilt |
Removed in Firefox 47 Open, close, and manipulate 3D view. |
| tools | srcdir path loads devtools from a local checkout (top-level directory with CLOBBER file). builtin loads originals. |
| unlisten |
Disable remote debugging. |
Command Line Examples
The following example will take a full screen screenshot of the current document being viewed in Firefox:
screenshot --fullpage firefox-developer-toolbar-gcli-screenshot-test.png
Where firefox-developer-toolbar-gcli-screenshot-test is the desired name of the screenshot image.
Contributing to the Command Line
The Firefox Command Line is built using the GCLI project, which has a significant section of documentation on GCLI and how it works. There is also documentation specific to integrating GCLI and Firefox on MDN.
Customization
There is some information on customizing the Command Line (particularly adding new commands) on the MDN.