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
Firefox’s 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
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
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
<script> tag into the <head> 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 10 Useful Firefox Developer Tools
The post 15 Graphical Command Line (GCLI) Commands in Firefox for Front-End Developers appeared first on Hongkiat.