mozilla

Revision 17129 of Web Console

  • Revision slug: Tools/Web_Console
  • Revision title: Web Console
  • Revision id: 17129
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment wip; 538 words added

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.

webconsole.png

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.

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.

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.

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.

 

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.

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]

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>
<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>
<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>
<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.</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>
<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> </p>
<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.</p>
<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>
Revert to this revision