Web Console

  • Revision slug: Tools/Web_Console
  • Revision title: Web Console
  • Revision id: 17179
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 115 words added, 1 words removed

Revision Content

 

{{ gecko_minversion_header("2.0") }}

Beginning with Firefox 4, the old Error Console has been deprecated in favor of the new, improved Web Console. The Web Console is something of a heads-up display for the web, letting you view error messages and other logged information. In addition, there are methods you can call to output information to the console, making it a useful debugging aid, and you can evaluate JavaScript on the fly.

{{ gecko_callout_heading("10.0") }}

Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, the variable $0 can be used to reference the currently-selected element when the Page Inspector is open.

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.

Note: The Error Console is still available; you can re-enable it by changing the devtools.errorconsole.enabled preference to true and 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

webconsole.png

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 {{ anch("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.
JavaScript messages
These messages are used by the browser to tell you about JavaScript errors, such as syntax errors, that occur while interpreting JavaScript code. For a list of JavaScript errors and messages that can be output to the console, see the documentation for {{ interface("nsIScriptError") }}.
Web developer messages

These messages are output explicitly by JavaScript code by using methods on the {{ domxref("console") }} object 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.

webconsole-repeat.png

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.

Below the toolbar is the log itself, and below that is the command line, where you can execute JavaScript in real time. A grippable resize bar is below that (or above it, if the Web Console is at the bottom of the window rather than the top.

Network message window

Let's take a look at what a network request information window looks like.

detailspanel.png

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.

Note: Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.

The command line interpreter

You can interpret JavaScript expressions in real time using the command line provided by the Web Console. See the little box with the ">" prompt in it? That's the command line.

cmdline.png

Any JavaScript expression you type will be evaluated, and the result output into the console log. You can do anything from simple computations to evaluating complex expressions that can even include variables defined on the current page.

You can also use the up and down arrow keys to cycle through the history of the commands you've entered.

Note: If you want to enter more than one line of code at the command line, you can press shift-enter instead of just enter after each line.

Basic usage

You can use the command line interpreter as a simple calculator. You probably won't, but you can:

simpleexpr.png

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.

autocomplete.png

You can directly access variables defined on the page:

variables.png

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:

jquery-tab.png

If we keep hitting tab, we get successive hints as to what we might be looking for.

Note: While using the Web Console, this is not the window object as it would be in code running in content. This lets you create variables without contaminating the content's namespace.

Keyboard shortcuts

Shortcut Description
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. {{ unimplemented_inline() }}
Escape Cancels the autocompletion popup.
Tab Generates an autocomplete suggestion and accepts the first one.

Helper commands

{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}

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 hide() method:

callfunction.png

Inspecting objects

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:

objectinspector.png

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.

See also

{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}

Revision Source

<p> </p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<p>Beginning with Firefox 4, the old <a href="/en/Error_Console" title="en/Error Console">Error Console</a> has been deprecated in favor of the new, improved Web Console. The Web Console is something of a heads-up display for the web, letting you view error messages and other logged information. In addition, there are methods you can call to output information to the console, making it a useful debugging aid, and you can evaluate JavaScript on the fly.</p>
<div class="geckoVersionNote" style="undefined"> <p>{{ gecko_callout_heading("10.0") }}</p> <p>Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, the variable <code>$0</code> can be used to reference the currently-selected element when the <a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a> is open.</p>
</div>
<p>The Web Console won't replace more advanced debugging tools like <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>; 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.</p>
<div class="note"><strong>Note:</strong> The Error Console is still available; you can re-enable it by changing the <code>devtools.errorconsole.enabled</code> preference to <code>true</code> and restarting the browser.</div>
<h2>Opening the Web Console</h2>
<p>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.</p>
<p>On Windows, the menu option for the Web Console is in <strong>Firefox-&gt;Web Developer-&gt;Web Console</strong>.</p>
<h2>Using the Web Console</h2>
<p><img alt="webconsole.png" class="internal default" src="/@api/deki/files/6087/=webconsole.png" style=""></p>
<p>The Web Console's interface consists of four areas: the toolbar, the log, the command line, and the resize bar.</p>
<p>There are four types of messages that can be displayed in the log:</p>
<dl> <dt>Network messages</dt> <dd>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 {{ anch("Network message window") }} for a look at what the output looks like.</dd> <dt>CSS messages</dt> <dd>These messages are generated by the browser to inform you of CSS errors that occur while rendering content.</dd> <dt>JavaScript messages</dt> <dd>These messages are used by the browser to tell you about JavaScript errors, such as syntax errors, that occur while interpreting JavaScript code. For a list of JavaScript errors and messages that can be output to the console, see the documentation for {{ interface("nsIScriptError") }}.</dd> <dt>Web developer messages</dt> <dd> <p>These messages are output explicitly by JavaScript code by using methods on the {{ domxref("console") }} object provided by the browser.</p> </dd>
</dl>
<p>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.</p>
<p><img alt="webconsole-repeat.png" class="internal default" src="/@api/deki/files/6088/=webconsole-repeat.png"></p>
<p>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.</p>
<p>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.</p>
<p>Below the toolbar is the log itself, and below that is the command line, where you can execute JavaScript in real time. A grippable resize bar is below that (or above it, if the Web Console is at the bottom of the window rather than the top.</p>
<dl>
</dl>
<h3>Network message window</h3>
<p>Let's take a look at what a network request information window looks like.</p>
<p><img alt="detailspanel.png" class="internal default" src="/@api/deki/files/4749/=detailspanel.png" style=""></p>
<p>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.</p>
<p>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.</p>
<div class="note"><strong>Note:</strong> Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.</div><h3>The command line interpreter</h3>
<p>You can interpret JavaScript expressions in real time using the command line provided by the Web Console. See the little box with the "&gt;" prompt in it? That's the command line.</p>
<p><img alt="cmdline.png" class="internal default" src="/@api/deki/files/4750/=cmdline.png" style="border: 1px solid black;"></p>
<p>Any JavaScript expression you type will be evaluated, and the result output into the console log. You can do anything from simple computations to evaluating complex expressions that can even include variables defined on the current page.</p>
<p>You can also use the up and down arrow keys to cycle through the history of the commands you've entered.</p>
<div class="note"><strong>Note:</strong> If you want to enter more than one line of code at the command line, you can press shift-enter instead of just enter after each line.</div>
<h3>Basic usage</h3>
<p>You can use the command line interpreter as a simple calculator. You probably won't, but you can:</p>
<p><img alt="simpleexpr.png" class="internal default" src="/@api/deki/files/4751/=simpleexpr.png" style="border: 1px solid black;"></p>
<p>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.</p>
<p><img alt="autocomplete.png" class="internal default" src="/@api/deki/files/4752/=autocomplete.png" style="border: 1px solid black;"></p>
<p>You can directly access variables defined on the page:</p>
<p><img alt="variables.png" class="internal default" src="/@api/deki/files/4753/=variables.png" style="border: 1px solid black;"></p>
<p>Here we see that <a class="external" href="http://jquery.com" title="http://jquery.com/">jQuery</a> is in use by the page we're looking at. Note what happens if we type "jQuery." then hit tab:</p>
<p><img alt="jquery-tab.png" class="internal default" src="/@api/deki/files/4754/=jquery-tab.png" style="border: 1px solid black;"></p>
<p>If we keep hitting tab, we get successive hints as to what we might be looking for.</p>
<div class="note"><strong>Note:</strong> While using the Web Console, <code>this</code> is not the window object as it would be in code running in content. This lets you create variables without contaminating the content's namespace.</div>
<h3>Keyboard shortcuts</h3>
<table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header">Shortcut</td> <td class="header">Description</td> </tr> <tr> <td>↑</td> <td>Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.</td> </tr> <tr> <td>↓</td> <td>Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.</td> </tr> <tr> <td>Ctrl-A</td> <td>Moves the cursor to the beginning of the line.</td> </tr> <tr> <td>Ctrl-E</td> <td>Moves the cursor to the end of the line.</td> </tr> <tr> <td>Return</td> <td>Executes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.</td> </tr> <tr> <td>Shift-Return</td> <td>Expands the height of the text input box for the command line by a line. {{ unimplemented_inline() }}</td> </tr> <tr> <td>Escape</td> <td>Cancels the autocompletion popup.</td> </tr> <tr> <td>Tab</td> <td>Generates an autocomplete suggestion and accepts the first one.</td> </tr> </tbody>
</table>
<h3>Helper commands</h3>
<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p>
<dl>
</dl>
<h3>Manipulating the page</h3>
<p>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 <code>counter</code>, you can change it with:</p>
<pre>window.counter = <em>newvalue</em>
</pre>
<p>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 <code>hide()</code> method:</p>
<p><img alt="callfunction.png" class="internal default" src="/@api/deki/files/4755/=callfunction.png" style="border: 1px solid black;"></p>
<h3>Inspecting objects</h3>
<p>Any time an object is output, you see it in the log as <code>[object <em>objectName</em>]</code>. If you click on this, you get the object inspector. So in the above example, if you click on <code>[object Object]</code>, you see this window:</p>
<p><img alt="objectinspector.png" class="internal default" src="/@api/deki/files/4756/=objectinspector.png"></p>
<p>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.</p>
<h2>See also</h2>
<ul> <li><a href="/en/Tools/Web_Console/Helpers" title="en/Using the Web Console/Helpers">Web Console Helpers</a></li> <li>{{ domxref("console") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}</p>
Revert to this revision