Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about firefox

Keyboard Shortcuts for Web Dev Tools Inspector and Console.


Sometimes, right clicking on something in a browser and picking "Inspect" from the context menu just isn't fast enough for me. I wanted to find a way to quickly open the Inspector and Console tabs in a browser's web developer tools, so naturally I turned to keyboard shortcuts. I've compiled a reference of the commands for Firefox and Chrome here.


Even better, the Web Dev tools will open up - with the last active tab - when you hit your F12 key. (In OSX, use fn F12 if you haven't enabled the "Use all F1, F2, etc keys as standard function keys" Keyboard Preference.)


Setting Up User Styles in Firefox


While reviewing talks for CascadiaFest, I wanted to find a way to hide comments from other reviewers until after I'd formed my opinion of the talk. I figured this would be pretty easy to do with user styles - the browser's base set of CSS rules that are followed for every site. In Firefox, these styles are stored in userContent.css in your profile folder.

Doing so proved a little more complicated than I anticipated, because Google's search results seem to interpret "userContent.css" as "userChrome.css". As you can imagine, this made it a little difficult to find information on userContent.css. Here are the two references that I did manage to find:

Here is what went into my user styles:

@-moz-document domain( {
  ul.comment-list { opacity: 0 !important; }
  ul.comment-list:hover { opacity: 1 !important; }

The @-moz-document domain "selector" allows me to limit these styles to pages delivered from a certain subdomain. I then hid the elements using opacity, and showed them when they were hovered over. Opacity isn't always the best way to hide things with CSS; but in this case I did want the elements to take up space on the page, and for their children to also be invisible. And a user stylesheet is a fine place for !important; I always want that style to apply, even if a higher specificity selector would override it.

After editing userContent.css, you have to restart Firefox for the changes to take effect.

The Firefox Command Line.


I'm old friends with the command line. Sometimes it's a hassle to remember exactly what to type, but sometimes a command line really is the right tool for the job at hand. And it turns out that another one of my old friends - Firefox - has a command line interface. Open it up at any time with Shift F2. So here are a few nifty features of Firefox's command line that I'd like to remember for next time:

Be aware that one of the first (and highest-ranked) announcements of Firefox's command line at is pretty out-of-date. Refer to instead.

1 comment(s).

Power-Up Your Bookmarks in Firefox.


I've created some pretty powerful bookmarks in Firefox to speed up my browsing workflow:

The bookmarks with URLs as locations just hit those URLs with whatever else you've typed as the %s argument. Thus you can hack your way into just about any site's custom search. The bookmarks with JavaScript as locations simply execute those pieces of JavaScript.

With the "keywords" field, I can execute these bookmarks with keyboard commands (typing into the URL bar). Since new tabs open with focus in the URL bar with Control T, this makes for some pretty zippy workflows. Searching the jQuery docs: Control T, jq [search term] [enter]. Looking up synonyms: Control T, thes [word] [enter].

The keywords are even pretty convenient when I have to involve the mouse. Adding the current URL to my Instapaper list: click into the URL bar and ip [enter]. Pulling up Google's cached version of the current page: click into the URL bar and gcache [enter].

Firefox's Scratchpad.


The below information cost me 90 minutes of my working day to earn. I pass it to you, loyal reader, for the bargain basement price of about 3 minutes.

It used to be that Firefox could execute JavaScript directly out of the URL. But, since Firefox 6 (August), this is no longer functional. Instead, Mozilla has provided a much nicer multi-line Scratchpad for editing JavaScript. Executing new JavaScript on a live page is something I do almost every day, so this is a great addition. And of course it's well populated with keyboard commands. Nicely done, Mozilla!

The current production version of Firebug (web developer add-on par excellence) has a bug where the JavaScript resizeTo function will not work if Firebug is enabled in the browser. To use resizeTo, you must disable Firebug from Firefox entirely; simply disabling Firebug for the browser window in question is not sufficient.

More blogs about firefox: