The Console is accessible from any panel. Unlike the other panels, the Console is not just used for one task, instead it might be used while inspecting the DOM, debugging JavaScript or analyzing HTML parse errors.

Follow the steps below to explore the Console:

• Open the Google Closure hovercard demo page.
• Open the Developer Tools window as described in the How to Access the Developer Tools section of this tutorial.
• Click the Show console toggle button, this is in the status bar at the bottom of the Developer Tools window. You can also toggle the Console using the Escape key or by clicking the Console toolbar icon.
  
  If there are any error or warning counts they are shown in the bottom-right corner of the window. Clicking on these also opens the Console.

The Console provides auto-completion and tab-completion. As you type expressions, property names are automatically suggested. If there are multiple properties with the same prefix, pressing the Tab key cycles through them. Pressing the right arrow key accepts the current suggestion. The current suggestion is also accepted by pressing the Tab key if there is only one matched property.

Console also supports Firebug's Command Line API.

Using console on Elements panel

Command Line API is particularly useful when working with the Elements panel. If it is not already selected, select the Elements panel and open console (hit Esc).

Type $("perf") at the console prompt.

This command dumps the node with the given id, in this case perf, into the Console.

Type $0 at the console prompt.

This command dumps the most recently selected node into the console. You can also use it in other console expressions.

Type $1 at the console prompt.

This command dumps previously selected nodes, try typing $2, $3 and so on.

Type inspect(profileCard) at the console prompt.

This selects the object with the given id, in this case profileCard.

Type dir(profileCard) at the console prompt.

This dumps the object with the given id, in this case profileCard, as a JavaScript object with its properties.

Type dirxml(profileCard) at the console prompt.

This dumps the object with the given id, in this case profileCard, as an HTML subtree.

Back to top

Last updated April 6, 2012.