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.
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
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.
2. Measure elements
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
3. Edit files quickly
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
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.
5. Resize page
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
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
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
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
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
On executing the command, the resource will be imported to the page by inserting a
tag into the section of the HTML document.
10. Take screenshots
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
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
console open and
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
14. Enable or disable add-ons
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
On the demo below you can see how to quickly disable Pocket in Firefox.
15. Manage settings
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 command, and to reset a setting, type
pref reset .
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):
The post 15 Graphical Command Line (GCLI) Commands in Firefox for Front-End Developers appeared first on Hongkiat.