Everyone who uses Firebug regularly knows the basics. They know how to inspect and edit HTML and CSS, analyze page loading times and the like. There are a few neat tricks, though, that aren’t quite immediately apparent, but are very handy.

Quickly Copy a Background URL

I like to play around with background images when I’m experimenting with a design or learning from someone else’s. This often involves copying the URL of a background image from one element and pasting it to another. It’s a pain to carefully select the URL portion of a shorthand background attribute, which is what I did until recently. As it turns out, you can just right-click the attribute and choose “Copy Image Location” or “Open Image in New Tab.” Palm, meet forehead.

Specify a Pseudo-element

If you hover over a link (or any element with a :hover pseudo-element) while Firebug is open, the right-hand pane updates to show the relevant CSS. Wouldn’t it be useful if it didn’t disappear as soon as you moved the mouse? Fortunately, you can lock the hover state with the little dropdown arrow on the Style tab. Just put a check mark next to the “:hover” option.

See the Exact Style Applied to an Element

Next to the Style tab in the right-hand pane is one labeled Computed. This is useful for working out cascading issues, or checking the exact dimensions of an element.

Console Logging

Instead of spamming alert() dialogs across your screen when you’re debugging JavaScript, you can use Firebug’s Console tab instead. Calling the console.log() function will output whatever you pass to it in the Console tab. e.g. console.log(‘hi’). There’s a page about it on the Firebug website.