commandline

Firebug and the Command Line

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.

Get your hands dirty

If you know your way around the DOM, sometimes there's no faster way to get answers than to just use JavaScript to snoop around. Firebug's command line lets you do just that - enter whatever JavaScript you like. It will be executed as if it were part of the page, and the returned values displayed in the console.

Autocomplete

Using the tab key you can autocomplete the name of variables and object properties. Keep hitting it to cycle through the complete set of possibilities, and use shift-tab to go backwards.

Autocomplete works at many levels. You can start hitting tab before you type anything to cycle through global variables. You can hit tab after typing "document.b" to cycle thorugh all properties that start with "b". You can even hit tab after a complex expression like "document.getElementsByTagName('a')[0]." to see all properties of the first link in the document.

Go big

If one line is making you feel a little cramped, don't panic. Firebug's command line can be expanded to a larger text editor so you can experiment with entire scripts instead of just one-liners.

Smart paste

So you've written a bunch of JavaScript in your editor and you want to test it out real quick. Just paste it into the command line. If it's more than one line, Firebug will automatically open the big text editor with your script ready to go.

Bookmarklet heaven

Creating bookmarklets has never been easier. Just hit the "Copy" button in the multi-line editor and your script will be copied to the clipboard in bookmarklet format.

Don't forget to click

Unlike a traditional command line, the output of each command is not static text, it is living hypertext. Any objects that are output to the console are hyperlinks that you can click to inspect the object in whichever Firebug tab is most appropriate.

Don't forget to right-click

Context menus contain a whole world of fun features waiting to be discovered. Different kinds of objects have their own context menus, so when you see a link to an object in the Firebug console, try right-clicking it.

Don't forget to middle-click

If you haven't already learned the magic of middle-click and tabbed browsing, now is a good time to learn. Just like when you middle-click a link in the Firefox browser, middle-clicking a link to a file or URL in the Firebug console will open it in a new tab.

For those without a middle mouse button, you can also hold down the control key (or command on Mac) and click for the same effect.

Inspect and command

After you've found an HTML element using the Inspect tool, you often want to use the command line to manipulate it. Firebug makes it easy; just use the "$1" variable to reference the last element you inspected, or "$2" for the one before that.

Likewise, you can use "$$1" and "$$2" to reference objects that are selected in the DOM tab.

Command and inspect

The command line is a wonderful launching pad for using the other tabs to inspect objects. Instead of hitting enter to see the result on the console, hit Shift+Enter and the result will be inspected in either the DOM tab, the HTML tab, the Script tab, or the CSS tab, whichever is most appropriate.