Firebug and the Command Line
Get your hands dirty
The autocompletion of the command line is very powerful. A popup shows a list of all available properties for an entered expression. Using
Enter you can autocomplete the selected suggestion. You can cycle through the different suggestions via
Down and other navigation keys as well as the mouse wheel.
Autocomplete works at many levels. After typing "document.b" you see all properties of
document that start with "b". It even works for complex expression like "document.getElementsByTagName('a')." giving you all properties of the first link in the document.
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.
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.
Be a commander
Enter to see a list of them.
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
$0 variable to reference the last element you inspected, or
$1 for the one before that.
There are many more commands providing you with a wide variety of functions. Just type "help" and hit
Enter to see a list of them.
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.
Command Line History
The command line maintains its own history of executed expressions and so, you can easily go back and execute an expression again. Just use up & down arrows or click on the red button on the left side of the command line to see a history popup with all entries.