15 GCLI Commands in Firefox for Front-End Developers
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.
Read Also: 10 Coolest Hidden Firefox Settings You Should Know
The Toolbar
Firefox’s GCLI is also known as Developer Toolbar. There are three ways to open it:
- Press the Shift + F2 keyboard shortcut.
- 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.
- 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.
Now let’s see some useful tasks you can perform in Firefox using its GCLI.
1. Remove page elements
Command: pagemod remove element <selector>
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 <selector> into the Firefox Command Line in order to remove those elements from the page.
The value of <selector> 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.
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.
3. Edit files quickly
Command: edit <url>
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.
4. Look up unfamiliar CSS properties
Command: mdn css <property>
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 <property> in the GCLI with <property> 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.
5. Resize page
Command: resize to <width> <height>
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.
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.
9. Test external libraries
Command: inject <url>
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 <script> tag into the <head> section of the HTML document.
10. Take screenshots
Command: screenshot <option>
The built-in screenshot taking tool in Firefox is quite powerful. For instance, you can target individual elements using CSS selectors, use a timer, apply a dpr. You can even take a screenshot of just the chrome portion of the browser (area surrounding the user content) by using the screenshot --chrome command.
The screenshots are saved in the Download folder of the browser in PNG format.
11. Open rulers
Command: rulers
Yet another cool tool from Firefox that is easily accessible via GCLI. The rulers command displays horizontal and vertical rulers around the page. The measurements of the rulers are in pixels. Run the same command to deactivate the ruler.
12. Open the console & debugger
Command: console open and dbg open
If the keyboard shortucts for opening the web console or the debugger tool have slipped your mind, no worries, just type the simple command console open or dbg open into the Firefox Command Line to open the respective tool.
13. Count page elements
Command: qsa <selector>
This nifty command from GCLI takes a quick census of elements in a web page that match any given CSS selector. For instance, to get count of all <a> elements on a page, use the qsa a command.
14. Enable or disable add-ons
Command: addon list
If you ever need to survey and manage your Firefox add-ons, I recommend you to use the GCLI commands rather than the Add-ons menu because the GCLI version lists all add-ons and plugins, including the pre-installed ones, that may not be listed in the Add-ons menu.
You can toggle the add-on status in the GCLI with the command addon followed by the relevant sub-command, either enable or disable.
On the demo below you can see how to quickly disable Pocket in Firefox.
15. Manage settings
Command: pref show <setting>
There are tons of customization settings users can access via Firefox’s about:config page. The same settings can be viewed and modified using the GCLI as well.
Using GCLI for accessing the customization settings is the quicker option if you already know which configuration you want to view or change. To set a value for a setting, use the pref set <setting> <value> command, and to reset a setting, type pref reset <setting>.
On the demo below you can see how to check the URI the inject jQuery command has injected into the page (see section #9 in this article):
Read Also: 10 Useful Firefox Developer Tools