Table of contents
- 1. Opening the Web Console
- 2. Using the Web Console
- 3. See also
The Web Console won't replace more advanced debugging tools like Firebug; what it does give you, however, is a way to let remote users of your site or web application gather and report console logs and other information to you. It also provides a lightweight way to debug content if you don't happen to have Firebug installed when something goes wrong.
trueand restarting the browser.
Opening the Web Console
Opening the Web Console is as simple as selecting the "Web Console" option from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Control-Shift-K (Command-Option-K on the Mac) keyboard shortcut. The Web Console will drop down from the top of the screen, shifting the web content down to make room.
On Windows, the menu option for the Web Console is in Firefox->Web Developer->Web Console.
Using the Web Console
The Web Console's interface consists of four areas: the toolbar, the log, the command line, and the resize bar.
There are four types of messages that can be displayed in the log:
- Network messages
- These messages are generated by the browser to tell you about network requests. If you click on a network request, you can get a look at the headers and other information about the request, including the response. If you'd like to actually log the entire request and response, including the data, right-click on the log and choose the "Log Request and Response Bodies" option from the contextual menu that appears. See Network message window for a look at what the output looks like.
- CSS messages
- These messages are generated by the browser to inform you of CSS errors that occur while rendering content.
- Logging messages
consoleobject provided by the browser.
When the same message is output multiple times, the Web Console only lists it once, with a counter to the right showing how many times it was repeated. This saves space in the log so you can get a better look at what's happening.
Display of each of these types of messages can be toggled on and off by clicking the corresponding button in the Web Console's toolbar. You can further filter the display by entering text in the "Filter" edit box. To clear the contents of the log display, click the "Clear" button.
You can move the Web Console between the top and bottom of the window, or to a dedicated window, using the "Position" pop-up menu in the toolbar.
Network message window
Let's take a look at what a network request information window looks like.
Scrolling this down provides the response headers. If you've enabled output of the request and response bodies, those are presented in this window as well.
The time listed after the HTTP status in the network message window is the time needed for the transfer of the complete response; that is, for both the header and body.
The command line interpreter
You can also use the up and down arrow keys to cycle through the history of the commands you've entered, and autocomplete options are provided.
You can use the command line interpreter as a simple calculator. You probably won't, but you can:
For convenience, the Web Console will try to autocomplete variable and function names it knows about. If it guesses wrong, you can either keep typing (and it will update its guess), or you can hit tab to get the next possible match.
You can directly access variables defined on the page:
Here we see that jQuery is in use by the page we're looking at. Note what happens if we type "jQuery." then hit tab:
If we keep hitting tab, we get successive hints as to what we might be looking for.
thisis not the window object as it would be in code running in content. This lets you create variables without contaminating the content's namespace.
|↑||Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.|
|↓||Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.|
|Ctrl-A||Moves the cursor to the beginning of the line.|
|Ctrl-E||Moves the cursor to the end of the line.|
|Return||Executes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.|
|Shift-Return||Expands the height of the text input box for the command line by a line.|
|Escape||Cancels the autocompletion popup.|
|Tab||Generates an autocomplete suggestion and accepts the first one.|
- Looks up a string as an ID of a DOM node; this is a shortcut for
document.getElementById()or calls the $ function in the page, if it exists.
- Looks up a CSS selector string, returning a list of DOM nodes that match. This is a shortcut for
- The currently-inspected element in the page.
- Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for
- Given an object, returns a list of the values on that object; serves as a companion to
- Clears the console output area.
- Given an object, opens the object inspector for that object.
- Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
- Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.
Example: Looking at the contents of a DOM node
Let's say you have a DOM node with the ID "title". In fact, this page you're reading right now has one, so you can open up the Web Console and try this right now.
Let's take a look at the contents of that node by using the
This automatically opens up the object inspector, showing you the contents of the DOM node with the ID "title".
Example: Dumping the contents of a DOM node
That's well and good if you happen to be sitting at the browser exhibiting some problem, but let's say you're debugging remotely for a user, and need a look at the contents of a node. You can have your user open up the Web Console and dump the contents of the node into the log, then copy and paste it into an email to you, using the
This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM node, but you get the idea.
Manipulating the page
You can actually make changes to the values of variables on the page to test things out. Just add "window." to the beginning of the variable name to make it visible to the page. For example, if the code on the page defines a variable
counter, you can change it with:
window.counter = newvalue
You can even call functions defined by the page. For example, consider the Reddit home page, where we know that there's a header on the page whose ID is "header". We can hide it by calling jQuery's
Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0)
, the variable
$0 can be used to reference the currently-selected element when the Page Inspector is open.
Any time an object is output, you see it in the log as
[object objectName]. If you click on this, you get the object inspector. So in the above example, if you click on
[object Object], you see this window:
This shows you the state of the object at the moment you clicked to open the inspector. Click the Update button to refresh the display to show the current contents of the object.