Web Console

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

Revision Content

{{ gecko_minversion_header("2.0") }}{{ draft() }}

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

Note: The look of the Web Console will be changing in upcoming betas of Firefox 4; we will update these screen shots when we can after that happens.

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 to 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 Tools menu, 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". There will be a button for this in the toolbar in an upcoming beta.

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:

log()
For general output of logging information.
info()
Informative logging information.
warn()
Outputs a warning message.
error()
Outputs an error message.

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]

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.

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.

{{ page("en/Web Console Helpers") }}

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

Revision Source

<p>{{ gecko_minversion_header("2.0") }}{{ draft() }}</p>
<p>In 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="note"><strong>Note:</strong> The look of the Web Console will be changing in upcoming betas of Firefox 4; we will update these screen shots when we can after that happens.</div>
<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" style="width: 600px; height: 254px; border: 1px solid black;"></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 to 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 Tools menu, 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". There will be a button for this in the toolbar in an upcoming beta.</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> <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>log()</code></dt> <dd>For general output of logging information.</dd> <dt><code>info()</code></dt> <dd>Informative logging information.</dd> <dt><code>warn()</code></dt> <dd>Outputs a warning message.</dd> <dt><code>error()</code></dt> <dd>Outputs an error message.</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> <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>
<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>
<p>{{ page("en/Web Console Helpers") }}</p>
<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></dl></dl>
Revert to this revision