Regardless of what number of fancy buttons and menus we’ve were given, there are all the time programmers who recognize command line get admission to of their paintings setting, particularly when it gets rid of a hunt for the best button or menu that shows the wanted surroundings in our line of sight.
Firefox has had a Graphical Command Line Interpreter, or in brief a GCLI for some time now, and been increasing its command set over the years. The GCLI instructions supply builders with a fast get admission to to building and configuration gear. It additionally has an autocomplete characteristic; should you press Tab whilst typing any command, the instructions prompt through GCLI will likely be entered.
Learn Additionally: 10 Coolest Hidden Firefox Settings You Should Know
Firefox’s GCLI is often referred to as Developer Toolbar. There are 3 ways to open it:
- Press the Shift + F2 keyboard shortcut.
- Click on the “Open Menu” (hamburger) icon at the rightmost aspect of the deal with bar (proper to the House button), then click on the Developer > Developer Toolbar submenu.
- Within the best menu bar, tick the Gear > Internet Developer > Developer Toolbar possibility.
As soon as the Developer Toolbar is open, you’ll be able to see it on the backside of the browser window. In case you’ve determined to paintings with the GCLI, I’d advise to simply depart it open at all times whilst operating.
Now let’s see some helpful duties you’ll be able to carry out in Firefox the use of its GCLI.
1. Take away web page parts
pagemod take away part
When you wish to have to take some other take a look at the structure of a internet web page with some parts got rid of, simply kind the command
pagemod take away part into the Firefox Command Line with a purpose to take away the ones parts from the web page.
The price of
must be a legitimate CSS selector at the web page. Say, in a web page you need to take away the entire hyperlinks (in particular) of the category
.btn, the command is written as:
pagemod take away part a.btn.
In most cases, the command
pagemod is used for editing a web page, through both disposing of or changing selected parts or attributes.
2. Measure parts
If you wish to know the size of any visible module on a internet web page, there’s a device for that. The “measure” software is available by way of each the everyday internet developer toolset and the GCLI.
Sort and input the
measure command into the command line, and the cursor will develop into a crosshair. The measurements will likely be proven in pixels subsequent to the crosshair cursor, and are of the width, top and diagonal period of the realm decided on. To disable the software, rerun the
3. Edit information temporarily
Get started enhancing your web page’s assets with the
edit command. Whilst typing the command, you are going to see the URIs of the entire to be had assets from that web page, which you’ll be able to browse the use of the up and down arrow keys. When you’ve decided on the useful resource you need to edit, press Tab to autocomplete the advice, and hit Input, and the editor software of the browser will open with the selected record.
4. Glance up unfamiliar CSS homes
This one is an attractive cool command—it is more or less a popup dictionary for CSS homes. In case you come throughout an unfamiliar CSS assets, and need to take a look at what it stands for for, run the command
mdn css within the GCLI with
changed through the real identify of that unfamiliar assets.
A popup will seem with the “definition” for that CSS assets proper above the toolbar. The definition is an extract from the reliable Mozilla Developer Network (MDN) web page of the given assets. MDN’s thesaurus of CSS homes, HTML parts and internet APIs are extremely cited.
If the textual content proven within the popup isn’t sufficient, and also you need to know extra, you’ll be able to click on the hyperlink Talk over with MDN Web page throughout the popup, and the respective MDN web page for that assets will likely be opened. At the moment, this command is to be had for CSS homes simplest.
5. Resize web page
The resize software permits you to see how your web page appears resized to precise dimensions, which will also be helpful when you need to preview your web page’s look in gadgets with dimensions other from the only you’re operating in.
Firefox additionally has a keyboard shortcut to open this software: Ctrl + Shift + M (Cmd + Alt + M for Mac). However should you already know the precise dimensions for use for the resizing, the fastest means is to run the
resize command with the size you wish to have.
The size are interpreted in pixels. As soon as the command is administered, you’ll see the resized web page.
6. Restart the browser
This command is self-evident. To restart Firefox, simply kind
restart into the command line, and press Input—can turn out to be useful whilst you set up add-ons or plugins that require a restart.
7. Open your Firefox profile folder
Each and every Firefox person will get their personal native profile folder that shops user-specific information, similar to bookmarks and the
/chrome folder. While you personalize Firefox you could wish to view and regulate the contents of this folder.
The other method to open this folder is to click on the Display Folder button at the
about:support page. By way of working the command
folder openprofile within the Firefox Command Line, you are going to see your profile folder open directly.
8. Replica colour values
As opposed to the truth that it helps simplest the hex layout, eyedropper is a great software for copying the colour worth of any visual hue on a internet web page. Input the command
eyedropper into the GCLI to toggle the software’s operationality.
9. Check exterior libraries
If you wish to check some exterior libraries to your internet web page, as a substitute of diving into the supply code to make the transient additions, simply use the
inject command to insert the libraries. For example, to incorporate jQuery simply kind
On executing the command, the useful resource will likely be imported to the web page through putting a
tag into the phase of the HTML file.
10. Take screenshots
The integrated screenshot taking software in Firefox is rather robust. For example, you'll be able to goal particular person parts the use of CSS selectors, use a timer, observe a dpr. You'll be able to even take a screenshot of simply the chrome portion of the browser (house surrounding the person content material) through the use of the
screenshot --chrome command.
The screenshots are stored within the Obtain folder of the browser in PNG layout.
11. Open rulers
But some other cool software from Firefox this is simply out there by way of GCLI. The
rulers command shows horizontal and vertical rulers across the web page. The measurements of the rulers are in pixels. Run the similar command to deactivate the ruler.
12. Open the console & debugger
console open and
If the keyboard shortucts for opening the internet console or the debugger software have slipped your thoughts, no worries, simply kind the straightforward command
console open or
dbg open into the Firefox Command Line to open the respective software.
13. Depend web page parts
14. Permit or disable add-ons
In case you ever wish to survey and arrange your Firefox add-ons, I like to recommend you to use the GCLI instructions somewhat than the Upload-ons menu for the reason that GCLI model lists all add-ons and plugins, together with the pre-installed ones, that is probably not indexed within the Upload-ons menu.
You'll be able to toggle the add-on standing within the GCLI with the command
addon adopted through the related sub-command, both
At the demo under you'll be able to see how you can temporarily disable Pocket in Firefox.
15. Arrange settings
There are lots of customization settings customers can get admission to by way of Firefox’s
about:config web page. The similar settings will also be seen and changed the use of the GCLI as neatly.
The use of GCLI for having access to the customization settings is the speedier possibility if you recognize which configuration you need to view or trade. To set a price for a surroundings, use the
pref set command, and to reset a surroundings, kind
pref reset .
At the demo under you'll be able to see how you can take a look at the URI the
inject jQuery command has injected into the web page (see phase #9 on this article):
Learn Additionally: 10 Useful Firefox Developer Tools You Should Know
The put up 15 Graphical Command Line (GCLI) Commands in Firefox for Front-End Developers seemed first on Hongkiat.WordPress Website Development