By
Firefox 16, now on the Beta channel, has a fantastic feature that was mentioned briefly in the Aurora 16 blog post and first introduced in a separate post by Joe Walker, the feature’s creator. We’ve devoted a sizable portion of the new Developer Toolbar to the “command line”, which you may sometimes see us call GCLI (short for Graphical Command Line Interface). The command line gives you quick keyboard control over your tools and access to features that don’t have any other user interface.
I have made a video version of this blog post so you can see the command line in action:
To get to the Developer Toolbar and the command line, you can use the shift-F2 keyboard shortcut, or select Developer Toolbar from the Web Developer menu. If you want a quicker keyboard shortcut (this is a keyboard-heavy feature, after all!), you can use the Customize Shortcuts add-on to override a shortcut that you don’t use.
This command line is designed to be quick-to-type and discoverable. It will complete commands and parameters for you, to save you typing. There’s also a lot of help built in for the commands and their options. Here’s a look at the list of commands shipped with the initial command line release:
Control Your Tools
Personally, I hate having to reach for my trackpad. Removing my hands from the keyboard just slows me down. The problem is that it’s not easy to remember all of the keyboard shortcuts and traditional keyboard navigation is sometimes not as quick as reaching for the trackpad. Let’s look at how the new command line helps with this.
Let’s say that I forgot the keyboard shortcut for the Web Console. I could reach for my trackpad and hit the Web Console button that is conveniently located on the new Developer Toolbar. Or, I can just remember the keyboard shortcut for the command line and run the command console open. Voila! The console opens. What I actually type to run that command is “con<tab>o<tab><enter>”, which is quick to type indeed.
Want to see what else you can do with the Web Console? Type help console.
I’m not even sure if there’s a keyboard shortcut for the Clear button in the Web Console. It’s easier to just run the console clear command than try to remember a seldom used shortcut.
Here are the current commands that control the developer tools:
- console – open, clear and close the Web Console
- dbg and break – many controls for the Debugger and breakpoints
- edit – open the Style Editor on any of the CSS files loaded in the page
- inspect – open the Page Inspector for a part of the page
- resize – control the Responsive Design View
- tilt – control the 3D page view
Let’s look at a more interesting example. The current design of mozilla.org is a responsive design. I want to see how the headings will show up on a smaller screen. If I’ve been working on the page, I would likely know some of the IDs and structure used in the page, so I could enter a command like:
inspect "#home-news h3"
The “inspect” command takes as a parameter a CSS selector that is used to select a node on the page. An easy way to jump into page inspection on any page is to type inspect body, because every page will have only one. After typing inspect "#home-news h3", I’ll see something like this:
In the style panel, I can see that the font size is set to 28px on this heading. How would it look on a phone-sized screen? Many phones report their size as 320×480. Let’s give that a try by typing the following command:
resize to 320 480
That turns on the Responsive Design View and sets the size at the same time. Here’s what the result looks like:
In the Style panel, we can now see that a media query with a max-width has taken effect and the font-size on the heading has dropped to 24px. We can also scroll down and see that the three columns that were side-by-side are now stacked. You could use the resize off command to turn off the Responsive Design View, or you could just hit <esc> a couple of times to get back to normal browsing mode.
Entirely New Developer Features
We’ve also added a handful of commands giving you some new and useful powers. Let’s take a look at a few of them.
Put your hands in the cookie jar
The “cookie” command highlights why this command line is a “graphical” command line and not your old ’70s-style command line. Running cookie list on mozilla.org, I see:
The output shows me all of the cookies that I have right now for this site. If I want to remove that cookie, all I have to do is type cookie remove WT_FPC or, if I think it’s easier, I can click on the “Remove” action listed next to the cookie and that command will be entered on the command line for me. I can also give myself new cookies using the “cookie set” command.
Screenshots for fun and profit
The “screenshot” command is really handy. At mozilla.org, I ran this command:
screenshot heading.png 0 false h1
This said to make a file called “heading.png”, wait 0 seconds before taking the shot, don’t include anything outside the visible browser window and finally grab just the element selected by the “h1” CSS selector. The result, saved conveniently in my Downloads directory, looks like this:
The command line provides hints inline for each parameter. Pressing F1 gives me even more help about the current parameter.
Stop the blinking!
The “pagemod” command lets you quickly make some bulk changes to the page. If you’re looking at a page and there’s something flashing at you, you can nuke it using the “pagemod remove element” command. See how everything on the page looks without classes by typing:
pagemod remove attribute class *
Or, take a look at how a different headline looks:
pagemod replace "Out of Date News" "The New Hotness"
Here’s a fun one that’s interesting to try out on popular sites:
pagemod remove element iframe
See if you can spot the bits that go away.
More goodies: grab the HTML, reconfigure Firefox
The “export html” command opens a new tab with an HTML snapshot of the current state of the page.
The “addon” command lets you quickly enable and disable addons. This is useful for isolating an add-on that might be causing you trouble, or for keeping some add-ons that you don’t use often turned off.
The “pref” command lets you easily change one of the many configuration options that Firefox has. For example, if you’d like to do some Firefox add-on development, you may find this command handy:
pref set devtools.chrome.enabled true
After that, use the “restart” command to restart the browser, and you’ll find that tools like Scratchpad have gained some extra powers for hacking on your browser. While many add-ons these days are restartless, you’ll find that there are still some popular ones that require a restart when enabling or disabling them, and the restart command is handy for that as well.
Add Your Own
One of the best features of command lines in general is that they are a very scalable form of user interface. Adding more commands does not add visual clutter in the UI you look at all day. Expect to see more commands in future Firefox releases, plus new commands that appear in add-ons.
In a future command line article, we’ll show you how to create your own commands. It’s easier than you might expect!
107 comments