No matter how many fancy buttons and menus we’ve got, there are always programmers who appreciate command line access in their work environment, especially when it eliminates a hunt for the right button or menu that displays the needed setting in our line of sight.

Firefox has had a Graphical Command Line Interpreter, or in short a GCLI for a while now, and been expanding its command set over time. The GCLI commands provide developers with a quick access to development and configuration tools. It also has an autocomplete feature; if you press Tab while typing any command, the commands suggested by GCLI will be entered.

The Toolbar

Firefox’s GCLI is also known as Developer Toolbar. There are three ways to open it:

  1. Press the Shift + F2 keyboard shortcut.
  2. Click the “Open Menu” (hamburger) icon on the rightmost side of the address bar (right to the Home button), then click the Developer > Developer Toolbar submenu.
  3. In the top menu bar, tick the Tools > Web Developer > Developer Toolbar option.

Once the Developer Toolbar is open, you can see it at the bottom of the browser window. If you’ve decided to work with the GCLI, I’d advise to just leave it open all the time while working.

Firefox GCLI OpenFirefox GCLI Open

Now let’s see some useful tasks you can perform in Firefox using its GCLI.

1. Remove page elements

Command: pagemod remove element

When you need to take another look at the layout of a web page with some elements removed, just type the command pagemod remove element into the Firefox Command Line in order to remove those elements from the page.

The value of needs to be a valid CSS selector on the page. Say, in a page you want to remove all the links (specifically) of the class .btn, the command is written as: pagemod remove element a.btn.

Generally, the command pagemod is used for modifying a page, by either removing or replacing chosen elements or attributes.

Remove elementsRemove elements

2. Measure elements

Command: measure

If you want to know the measurement of any visual module on a web page, there’s a tool for that. The “measure” tool is accessible via both the typical web developer toolset and the GCLI.

Type and enter the measure command into the command line, and the cursor will turn into a crosshair. The measurements will be shown in pixels next to the crosshair cursor, and are of the width, height and diagonal length of the area selected. To disable the tool, rerun the measure command.

Measure elementsMeasure elements

3. Edit files quickly

Command: edit

Start editing your page’s resources with the edit command. While typing the command, you will see the URIs of all the available resources from that page, which you can browse using the up and down arrow keys. Once you’ve selected the resource you want to edit, press Tab to autocomplete the suggestion, and hit Enter, and the editor tool of the browser will open with the chosen file.

Edit files quicklyEdit files quickly

4. Look up unfamiliar CSS properties

Command: mdn css

This one is a pretty cool command—it is kind of a popup dictionary for CSS properties. If you come across an unfamiliar CSS property, and want to check what it stands for for, run the command mdn css in the GCLI with replaced by the actual name of that unfamiliar property.

A popup will appear with the “definition” for that CSS property right above the toolbar. The definition is an extract from the official Mozilla Developer Network (MDN) page of the given property. MDN’s glossary of CSS properties, HTML elements and web APIs are highly cited.

If the text shown in the popup is not enough, and you want to know more, you can click the link Visit MDN Page inside the popup, and the respective MDN page for that property will be opened. Right now, this command is available for CSS properties only.

Look up unfamiliar CSS propertiesLook up unfamiliar CSS properties

5. Resize page

Command: resize to

The resize tool lets you see how your page looks resized to specific dimensions, which can be useful when you want to preview your page’s appearance in devices with dimensions different from the one you’re working in.

Firefox also has a keyboard shortcut to open this tool: Ctrl + Shift + M (Cmd + Alt + M for Mac). But if you already know the exact dimensions to be used for the resizing, the quickest way is to run the resize command with the dimensions you need.

The dimensions are interpreted in pixels. Once the command is run, you’ll see the resized page.

Resize pageResize page

6. Restart the browser

Command: restart

This command is self-evident. To restart Firefox, just type restart into the command line, and press Enter—can come in handy when you install add-ons or plugins that require a restart.

7. Open your Firefox profile folder

Command: folder openprofile

Every Firefox user gets their own local profile folder that stores user-specific files, such as bookmarks and the /chrome folder. When you personalize Firefox you may need to view and modify the contents of this folder.

The alternative way to open this folder is to click the Show Folder button on the about:support page. By running the command folder openprofile in the Firefox Command Line, you will see your profile folder open at once.

8. Copy color values

Command: eyedropper

Other than the fact that it supports only the hex format, eyedropper is a brilliant tool for copying the color value of any visible hue on a web page. Enter the command eyedropper into the GCLI to toggle the tool’s operationality.

Copy color valuesCopy color values

9. Test external libraries

Command: inject

If you want to test some external libraries on your web page, instead of diving into the source code to make the temporary additions, just use the inject command to insert the libraries. For instance, to include jQuery just type inject jQuery.

On executing the command, the resource will be imported to the page by inserting a