Console

  • Revision slug: DOM/console
  • Revision title: console
  • Revision id: 305027
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ domref() }}

The console object provides access to the browser's debugging console. The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

Note: At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.

For details on how this object interacts with the Web Console in Firefox, see Web Console.

{{ gecko_callout_heading("12.0") }}

Prior to Gecko 12.0 {{ geckoRelease("12.0") }}, the console object's methods only work when the Web Console is open. Starting with Gecko 12.0, output is cached until the Web Console is opened, then displayed at that time.

Note: It's worth noting that the built-in console object is compatible with the one provided by by Firebug.

Methods

{{ domxref("console.log()", "console.debug()") }} {{ deprecated_inline("5.0") }}
An alias for log(); this was added to improve compatibility with existing sites already using debug(). However, you should use {{ domxref("console.log()") }} instead.
{{ domxref("console.dir()") }}
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.
{{ domxref("console.error()") }}
Outputs an error message. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.
{{ domxref("console.group()") }}
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") }}.
{{ domxref("console.groupCollapsed()") }}
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") }}.
{{ domxref("console.groupEnd()") }}
Exits the current inline group. See {{ anch("Using groups in the console") }}.
{{ domxref("console.info()") }}
Informative logging information. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.
{{ domxref("console.log()") }}
For general output of logging information. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.
{{ domxref("console.time()") }}
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
{{ domxref("console.timeEnd()") }}
Stops the specified timer and logs the elapsed time in seconds since its start. See {{ anch("Timers") }}.
{{ domxref("console.trace()") }}
Outputs a stack trace. See {{ anch("Stack traces") }}.
{{ domxref("console.warn()") }}
Outputs a warning message. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.

Outputting text to the console

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{ domxref("console.log()") }}, {{ domxref("console.info()") }}, {{ domxref("console.warn()") }}, and {{ domxref("console.error()") }} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.

Outputting a single object

The simplest way to use the logging methods is to output a single object:

var someObject = { str: "Some text", id: 5 };
console.log(someObject);

The output looks something like this:

[09:27:13.475] ({str:"Some text", id:5})

Outputting multiple objects

You can also output multiple objects by simply listing them when calling the logging method, like this:

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

This output will look like this:

[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})

{{ h2_gecko_minversion("Using 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. Clicking the link opens an inspector.
%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

{{ h2_gecko_minversion("Timers", "10.0") }}

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

For example, given this code:

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

will log the time needed by the user to discard the alert box:

timerresult.png

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.

Stack traces

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{ domxref("console.trace()") }}. Consider this code:

function foo() {
  function bar() {
    console.trace();
  }
}

When you call foo(), the output to the console looks like this:

trace-output.png

You'll note that the "Stack trace from Web Console, function bar, line 1" entry in the log is a hyperlink. Clicking on it gives you an object inspector you can use to get more details:

trace-inspector.png

This output provides a lot of handy information you can use to look through your code and figure out how your code got where it is (which is especially nice when it's not supposed to have gotten there in the first place!).

See also

{{ languages( { "ja": "ja/DOM/console"} ) }}

Revision Source

<p>{{ domref() }}</p>
<p>The console object provides access to the browser's debugging console. The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p>
<div class="note">
  <strong>Note:</strong> At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.</div>
<p>For details on how this object interacts with the Web Console in Firefox, see <a href="/en/Tools/Web_Console" title="Web Console">Web Console</a>.</p>
<div class="geckoVersionNote" style="undefined">
  <p>{{ gecko_callout_heading("12.0") }}</p>
  <p>Prior to Gecko 12.0 {{ geckoRelease("12.0") }}, the console object's methods only work when the Web Console is open. Starting with Gecko 12.0, output is cached until the Web Console is opened, then displayed at that time.</p>
</div>
<div class="note">
  <strong>Note:</strong> It's worth noting that the built-in console object is compatible with the one provided by by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</div>
<h2 id="Methods">Methods</h2>
<dl>
  <dt>
    {{ domxref("console.log()", "console.debug()") }} {{ deprecated_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>. However, you should use {{ domxref("console.log()") }} instead.</dd>
  <dt>
    {{ domxref("console.dir()") }}</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>
    {{ domxref("console.error()") }}</dt>
  <dd>
    Outputs an error message. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.</dd>
  <dt>
    {{ domxref("console.group()") }}</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>
    {{ domxref("console.groupCollapsed()") }}</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>
    {{ domxref("console.groupEnd()") }}</dt>
  <dd>
    Exits the current inline group. See {{ anch("Using groups in the console") }}.</dd>
  <dt>
    {{ domxref("console.info()") }}</dt>
  <dd>
    Informative logging information. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.</dd>
  <dt>
    {{ domxref("console.log()") }}</dt>
  <dd>
    For general output of logging information. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.</dd>
  <dt>
    {{ domxref("console.time()") }}</dt>
  <dd>
    Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd>
  <dt>
    {{ domxref("console.timeEnd()") }}</dt>
  <dd>
    Stops the specified timer and logs the elapsed time in seconds since its start. See {{ anch("Timers") }}.</dd>
  <dt>
    {{ domxref("console.trace()") }}</dt>
  <dd>
    Outputs a stack trace. See {{ anch("Stack traces") }}.</dd>
  <dt>
    {{ domxref("console.warn()") }}</dt>
  <dd>
    Outputs a warning message. You may use string substitution and additional arguments with this method; see {{ anch("Using string substitutions") }}.</dd>
</dl>
<!-- todo?: add console.assert; WebKit has shipped it for a quite a while (http://trac.webkit.org/changeset/33946, webkit 526.7) and IE8+, Opera support it too. -->
<h2 id="Specification" name="Specification">Outputting text to the console</h2>
<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{ domxref("console.log()") }}, {{ domxref("console.info()") }}, {{ domxref("console.warn()") }}, and {{ domxref("console.error()") }} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p>
<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.</p>
<h3 id="Outputting_a_single_object">Outputting a single object</h3>
<p>The simplest way to use the logging methods is to output a single object:</p>
<pre class="brush: js">
var someObject = { str: "Some text", id: 5 };
console.log(someObject);
</pre>
<p class="deki-transform">The output looks something like this:</p>
<pre class="deki-transform">
[09:27:13.475] ({str:"Some text", id:5})</pre>
<h3 class="deki-transform" id="Outputting_multiple_objects">Outputting multiple objects</h3>
<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p>
<pre class="brush: js">
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>This output will look like this:</p>
<pre>
[09:28:22.711] My first car was a Dodge Charger . The object is:&nbsp; ({str:"Some text", id:5})
</pre>
<p>{{ h2_gecko_minversion("Using 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. Clicking the link opens an inspector.</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="deki-transform">
for (var i=0; i&lt;5; i++) {
&nbsp;&nbsp;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/6082/=nesting.png" /></p>
<p>{{ h2_gecko_minversion("Timers", "10.0") }}</p>
<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p>
<p>For example, given this code:</p>
<pre class="brush: js">
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");
</pre>
<p>will log the time needed by the user to discard the alert box:</p>
<p><img alt="timerresult.png" class="internal default" src="/@api/deki/files/6084/=timerresult.png" style="" /></p>
<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p>
<div class="note">
  <strong>Note</strong><strong>:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div>
<h2 id="Stack_traces">Stack traces</h2>
<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{ domxref("console.trace()") }}. Consider this code:</p>
<pre>
function foo() {
&nbsp; function bar() {
&nbsp; &nbsp; console.trace();
&nbsp; }
}
</pre>
<p>When you call <code>foo()</code>, the output to the console looks like this:</p>
<p><img alt="trace-output.png" class="internal default" src="/@api/deki/files/6086/=trace-output.png" /></p>
<p>You'll note that the "Stack trace from Web Console, function bar, line 1" entry in the log is a hyperlink. Clicking on it gives you an object inspector you can use to get more details:</p>
<p><img alt="trace-inspector.png" class="internal default" src="/@api/deki/files/6085/=trace-inspector.png" /></p>
<p>This output provides a lot of handy information you can use to look through your code and figure out how your code got where it is (which is especially nice when it's not supposed to have gotten there in the first place!).</p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en/Tools" title="Tools">Tools</a></li>
  <li><a href="/en/Tools/Web_Console" title="Web Console">Web Console</a></li>
</ul>
<p>{{ languages( { "ja": "ja/DOM/console"} ) }}</p>
Revert to this revision