Web Console

  • Revision slug: Tools/Web_Console
  • Revision title: Web Console
  • Revision id: 17164
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

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.

webconsole.png

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-Shift-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.

The Web Console log

There's a lot of information that can be displayed in the log. You can turn each of these types of information on and off using the checkboxes in the Web Console toolbar. You can also filter using a text string by entering a filter string in the "filter" edit box in the toolbar, and can clear the current contents of the log by right-clicking on the log and choosing "Clear".

Browser-generated messages

There are three categories of messages that the browser itself can generate.

Network messages
These messages 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.
CSS errors
These messages inform you of CSS errors that occur while rendering content.
JavaScript errors
These messages 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") }}.

JavaScript code-generated messages

There are four categories of messages that JavaScript code can generate using the console object. See The console object below for details; each of the methods provided for generating log output can be toggled on and off individually using the filter checkboxes.

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.

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 console object

The Web Console implements a console object that works the same as the one provided by Firebug. It offers four methods for generating different types of log output:

dir() {{ gecko_minversion_inline("8.0") }}
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
group() {{ gecko_minversion_inline("9.0") }}
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd(). See {{ anch("Using groups in the console") }}.
groupCollapsed() {{ gecko_minversion_inline("9.0") }}
Creates a new inline group, indenting all following output by another level; unlike group(), this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd(). See {{ anch("Using groups in the console") }}.
groupEnd() {{ gecko_minversion_inline("9.0") }}
Exits the current inline group. See {{ anch("Using groups in the console") }}.
log()
For general output of logging information. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.
debug() {{ gecko_minversion_inline("5.0") }}
An alias for log(); this was added to improve compatibility with existing sites already using debug().
info()
Informative logging information. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.
warn()
Outputs a warning message. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.
error()
Outputs an error message. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.
trace() {{ gecko_minversion_inline("6.0") }}
Outputs a stack trace.

Each of these gets styled differently in the console log, and can be filtered using the checkboxes in the log's toolbar. Those are the only differences; they don't cause any behavioral difference in how your code runs. Using the different logging levels carefully can help you use the filter controls to focus on the messages that matter most to you at any given time.

Note: If a console object is already defined on the page, the Web Console's won't override it. In addition, if the Web Console panel isn't open, its console object is not defined. So be sure to open the Web Console before starting to test your code, or attempts to use the console object will abort your script. (Note that the console object will always be available starting in an upcoming beta).

These functions accept as many arguments as you like; the string representations of each argument gets appended together to create the output, so you can do things like:

var car = "Dodge Charger";
var someObject = {str:"Some text", id:5}; 
console.info("My first car was a", car, ". The object is: ", someObject);

The output is:

14:15:20.748: My first car was a Dodge Charger . The object is:  [object Object]

{{ h2_gecko_minversion("String substitutions", "9.0") }}

Gecko 9.0 {{ geckoRelease("9.0") }} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

Substitution string Description
%o Outputs a hyperlink to a JavaScript object.
%d Outputs an integer. Formatting is not yet supported.
%i Outputs an integer. Formatting is not yet supported.
%s Outputs a string.
%f Outputs a floating-point value. Formatting is not yet supported.

Each of these pulls the next argument after the format string off the parameter list. For example:

for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}

The output looks like this:

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.

{{ h2_gecko_minversion("Using groups in the console", "9.0") }}

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.

To exit the current group, simply call console.groupEnd().

For example, given this code:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

The output looks like this:

nesting.png

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.pnghttps://developer.mozilla.org/en/Using_the_Web_Console#Basic_usage

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.

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/Using_the_Web_Console"} ) }}

Revision Source

<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>
<p><a href="/@api/deki/files/4748/=webconsole.png" title="webconsole.png"><img alt="webconsole.png" class="internal default" src="/@api/deki/files/4748/=webconsole.png"></a></p>
<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-Shift-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>The Web Console log</h2>
<p>There's a lot of information that can be displayed in the log. You can turn each of these types of information on and off using the checkboxes in the Web Console toolbar. You can also filter using a text string by entering a filter string in the "filter" edit box in the toolbar, and can clear the current contents of the log by right-clicking on the log and choosing "Clear".</p>
<h3>Browser-generated messages</h3>
<p>There are three categories of messages that the browser itself can generate.</p>
<dl> <dt>Network messages</dt> <dd>These messages 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.</dd> <dt>CSS errors</dt> <dd>These messages inform you of CSS errors that occur while rendering content.</dd> <dt>JavaScript errors</dt> <dd>These messages tell you about JavaScript errors, such as syntax errors, that occur while interpreting JavaScript code.</dd>
</dl>
<p>For a list of JavaScript errors and messages that can be output to the console, see the documentation for {{ interface("nsIScriptError") }}.</p>
<dl>
</dl>
<h3>JavaScript code-generated messages</h3>
<p>There are four categories of messages that JavaScript code can generate using the <code>console</code> object. See <a href="/en/Using_the_Web_Console#The_console_object" title="en/Using the Web Console#The console object">The console object</a> below for details; each of the methods provided for generating log output can be toggled on and off individually using the filter checkboxes.</p>
<h2>Network message window</h2>
<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"></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>
<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>
<h2>The console object</h2>
<p>The Web Console implements a <code>console</code> object that works the same as the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>. It offers four methods for generating different types of log output:</p>
<dl> <dt><code>dir()</code> {{ gecko_minversion_inline("8.0") }}</dt> <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd> <dt><code>group()</code> {{ gecko_minversion_inline("9.0") }}</dt> <dd>Creates a new inline group, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>. See {{ anch("Using groups in the console") }}.</dd> <dt><code>groupCollapsed()</code> {{ gecko_minversion_inline("9.0") }}</dt> <dd>Creates a new inline group, indenting all following output by another level; unlike <code>group()</code>, this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>. See {{ anch("Using groups in the console") }}.</dd> <dt><code>groupEnd()</code> {{ gecko_minversion_inline("9.0") }}</dt> <dd>Exits the current inline group. See {{ anch("Using groups in the console") }}.</dd> <dt><code>log()</code></dt> <dd>For general output of logging information. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.</dd> <dt><code>debug()</code> {{ gecko_minversion_inline("5.0") }}</dt> <dd>An alias for <code>log()</code>; this was added to improve compatibility with existing sites already using <code>debug()</code>.</dd> <dt><code>info()</code></dt> <dd>Informative logging information. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.</dd> <dt><code>warn()</code></dt> <dd>Outputs a warning message. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.</dd> <dt><code>error()</code></dt> <dd>Outputs an error message. You may use string substitution and additional arguments with this method; see {{ anch("String substitutions") }}.</dd> <dt><code><strong>trace() </strong></code>{{ gecko_minversion_inline("6.0") }}</dt> <dd>Outputs a stack trace.</dd>
</dl>
<p>Each of these gets styled differently in the console log, and can be filtered using the checkboxes in the log's toolbar. Those are the only differences; they don't cause any behavioral difference in how your code runs. Using the different logging levels carefully can help you use the filter controls to focus on the messages that matter most to you at any given time.</p>
<div class="note"><strong>Note:</strong> If a <code>console</code> object is already defined on the page, the Web Console's won't override it. In addition, if the Web Console panel isn't open, its <code>console</code> object is not defined. So be sure to open the Web Console before starting to test your code, or attempts to use the <code>console</code> object will abort your script. (Note that the <code>console</code> object will always be available starting in an upcoming beta).</div>
<p>These functions accept as many arguments as you like; the string representations of each argument gets appended together to create the output, so you can do things like:</p>
<pre>var car = "Dodge Charger";
var someObject = {str:"Some text", id:5}; 
console.info("My first car was a", car, ". The object is: ", someObject);
</pre>
<p>The output is:</p>
<pre><span style="color: rgb(51, 153, 102);">14:15:20.748: My first car was a Dodge Charger . The object is:  [object Object]</span>
</pre>
<p>{{ h2_gecko_minversion("String substitutions", "9.0") }}</p>
<p>Gecko 9.0 {{ geckoRelease("9.0") }} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p>
<table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header">Substitution string</td> <td class="header">Description</td> </tr> <tr> <td>%o</td> <td>Outputs a hyperlink to a JavaScript object.</td> </tr> <tr> <td>%d</td> <td>Outputs an integer. Formatting is not yet supported.</td> </tr> <tr> <td>%i</td> <td>Outputs an integer. Formatting is not yet supported.</td> </tr> <tr> <td>%s</td> <td>Outputs a string.</td> </tr> <tr> <td>%f</td> <td>Outputs a floating-point value. Formatting is not yet supported.</td> </tr> </tbody>
</table>
<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p>
<pre class="brush: js">for (var i=0; i&lt;5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}
</pre>
<p>The output looks like this:</p>
<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.
</pre>
<p>{{ h2_gecko_minversion("Using groups in the console", "9.0") }}</p>
<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p>
<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div>
<p class="note">To exit the current group, simply call <code>console.groupEnd()</code>.</p>
<p class="note">For example, given this code:</p>
<pre class="brush: js">console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");</pre>
<p>The output looks like this:</p>
<p><img alt="nesting.png" class="internal default" src="/@api/deki/files/5907/=nesting.png"></p><h2>The command line interpreter</h2>
<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;">https://developer.mozilla.org/en/Using_the_Web_Console#Basic_usage</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>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/Using_the_Web_Console/Helpers" title="en/Using the Web Console/Helpers">Web Console Helpers</a></li>
</ul>
<p>{{ languages( { "ja": "ja/Using_the_Web_Console"} ) }}</p>
Revert to this revision