9 January 2024

15 GCLI Commands in Firefox for Front-End Developers

By Ronald Smith

I love having the power of the command line right at my fingertips when I’m working as a front-end developer. It’s like having a secret weapon that saves me from endlessly searching through menus and buttons for the right setting.

Luckily, Firefox has its own command line interpreter called GCLI (Graphical Command Line Interpreter). It’s been around for a while and has grown its command set over time, giving developers like me easy access to essential development and configuration tools.

One of my favorite features of GCLI is the autocomplete. When I’m typing a command, I can simply press Tab, and GCLI will suggest commands that match what I’m typing. It’s a real time-saver.

The Toolbar

If you’re using Firefox, you might already be familiar with the GCLI, also called the Developer Toolbar. There are three simple ways to open it:

  1. Press Shift + F2 on your keyboard.
  2. Click the “Open Menu” icon (it looks like a hamburger) on the far right side of the address bar, then select Developer > Developer Toolbar from the menu.
  3. In the top menu bar, go to Tools > Web Developer > Developer Toolbar.

Once you have the Developer Toolbar open, you’ll see it conveniently located at the bottom of your browser window. If you’re planning to use the GCLI, I recommend keeping it open at all times while you work.

15 GCLI Commands in Firefox for Front-End Developers

Hey there! Let me show you some cool stuff you can do in Firefox using its GCLI.

1. Get rid of unwanted elements

Command: pagemod remove element

Ever wanted to check out a webpage without certain elements cluttering up the screen? Just use the command “pagemod remove element” in the Firefox Command Line, and watch those elements disappear!

To use this command, you need to provide a valid CSS selector for the elements you want to remove. For example, if you want to remove all the links with the class “.btn”, just type: “pagemod remove element a.btn”.

Overall, the “pagemod” command is great for modifying a webpage by removing or replacing specific elements or attributes.

2. Measure elements

Command: measure

If you want to find out the size of any element on a web page, there’s a special tool just for that. It’s called the “measure” tool and you can access it using the web developer toolset or the GCLI.

To use the measure tool, simply type and enter the “measure” command in the command line. Once activated, your cursor will transform into a crosshair. The measurements of the selected area will be displayed in pixels next to the crosshair cursor. You’ll see the width, height, and diagonal length of the element you’re measuring. If you want to disable the tool, just run the “measure” command again.

Here’s another handy command that can save you time: the “edit” command. To quickly edit files, simply type and enter “edit” in the command line.

Hey there! Ready to dive into editing your page’s resources? Just use the edit command. As you type, you’ll see the URIs of all the available resources from that page. To browse through them, use the up and down arrow keys. Once you’ve found the resource you want to edit, press Tab to autocomplete the suggestion. Then hit Enter, and the browser’s editor tool will open up with the file you chose.

Step 4: Look up CSS Properties

Now, here’s a nifty command for you: mdn css. It’s like a popup dictionary for CSS properties. If you find one you’re not familiar with, just run the “mdn css” command in the GCLI. Replace “unfamiliar property” with the actual name of that mysterious property. It’ll give you the lowdown on what it’s all about.

When you use CSS properties while editing, a little box will pop up showing the definition of that property from the Mozilla Developer Network. This helps you understand what the property does and how to use it correctly. If you want more information, you can click the “Visit MDN Page” link in the popup to open the full MDN page for that property. Please note that this feature is only available for CSS properties.

Now let’s move on to the next tip. Did you know that you can resize the page you’re working on? Just use the “resize to” command, followed by the desired dimensions.

The resize tool allows you to view how your page appears when resized to specific dimensions. This can be helpful when you want to see how your page will look on different devices.

In Firefox, you can open this tool with a keyboard shortcut: Ctrl + Shift + M (Cmd + Alt + M for Mac). However, if you already know the exact dimensions you want to use, the quickest way is to run the resize command with those dimensions.

The dimensions are measured in pixels. Once you run the command, you will see the resized page.

To restart the browser, use the following command: restart.

This is an easy command. If you want to restart Firefox, just type “restart” into the command line and press Enter. It can be really useful when you install add-ons or plugins that need a restart.

7. Time to find your Firefox profile folder

Command: folder openprofile

Every Firefox user has their own special profile folder that stores files specific to them, like bookmarks and the /chrome folder. If you want to personalize Firefox and make changes to these files, you’ll need to know where to find this folder.

Another way to open the profile folder is by clicking on the Show Folder button on the about:support page. But you can also just run the command “folder openprofile” in the Firefox Command Line, and your profile folder will open right away.

8. Get color values

Command: eyedropper

If you’re looking to copy a color value from a web page, the eyedropper tool is perfect. It’s a handy tool that lets you select any hue and grab its color value. Just type “eyedropper” into the GCLI and the tool will activate.

9. Test external libraries

Command: inject

If you want to try out external libraries on your web page without making permanent changes to your source code, you can use the inject command. Instead of manually adding the library code, simply type “inject” followed by the library you want to include. For example, if you want to add jQuery, just type “inject jQuery”.

When you run the command, the library will be imported into your page by adding a tag to the HTML document’s section.

10. Take screenshots

Command: screenshot

The screenshot tool in Firefox is super powerful. You can do a lot with it! For example, you can use CSS selectors to capture specific elements, set a timer, or even take a screenshot of just the browser chrome (the stuff around the main content) with the “–chrome” command.

When you take screenshots, they get saved in the Download folder of your browser as PNG files.

Now, let’s talk about some other cool tools in Firefox!

11. Open rulers

If you want to see rulers on your page, Firefox has got you covered. Just use the “rulers” command in the GCLI (Firefox’s command line interface), and horizontal and vertical rulers will appear. These rulers show you measurements in pixels. If you want to turn off the rulers, just run the same command again.

12. Open the console & debugger

Last but not least, let’s talk about the console and debugger. These are really handy tools for web developers. With the console, you can see errors and log messages from your website. And the debugger helps you step through your code and find issues.

So, go ahead and try out these awesome tools in Firefox! They’ll make your web development life so much easier.

Hey there! Need a little reminder on how to access some handy tools in Firefox? No problem! Just follow these simple commands and you’ll be up and running in no time.

Command 1: Open the Web Console or Debugger Tool

If you forgot the keyboard shortcuts for opening the web console or the debugger tool, don’t worry! Just type the easy command console open or dbg open into the Firefox Command Line, and voila! The respective tool will open right up for you.

Command 2: Count Page Elements

Looking for a quick and easy way to see how many elements on a web page match a specific CSS selector? We’ve got you covered. Just use the nifty qsa command from GCLI. For example, to count all elements on a page, simply type qsa a and hit enter. Easy as pie!

Command 3: Enable or Disable Add-ons

Need to manage your add-ons? No problemo! Just use the addon list command, and you’ll get a handy list of all your installed add-ons. From there, you can easily enable or disable them to suit your needs.

If you ever need to check and control your Firefox add-ons, I suggest using the GCLI commands instead of the Add-ons menu. The GCLI version lists all add-ons and plugins, including the ones that come pre-installed, which may not be shown in the Add-ons menu.

With the GCLI, you can easily change the status of an add-on by using the “addon” command followed by “enable” or “disable” as sub-commands.

In the demonstration below, I’ll show you how to quickly disable Pocket in Firefox.

15. Manage settings

Command: pref show

Firefox has many customization settings that users can access through the about:config page. These same settings can also be viewed and edited using the GCLI.

If you already know what customization settings you want to view or change, using GCLI is the quickest option. To change a setting, use the command “pref set” followed by the value you want to set. To reset a setting, type “pref reset”.

In the following demo, you can check the URI that the inject jQuery command has injected into the page (see section #9 in this article):