The Console object provides access to the browser's debugging console (e.g. the Web Console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

The Console object can be accessed from any global object. Window on browsing scopes and WorkerGlobalScope as specific variants in workers via the property console. It's exposed as Window.console, and can be referenced as simply console. For example:

console.log("Failed to open the specified link")

This page documents the Methods available on the Console object and gives a few Usage examples.

註: This feature is available in Web Workers.

Methods

Console.assert()
Log a message and stack trace to console if the first argument is false.
Console.clear()
Clear the console.
Console.count()
Log the number of times this line has been called with the given label.
Console.debug()
An alias for log().
Note: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.
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.
Console.dirxml()

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.

Console.error()
Outputs an error message. You may use string substitution and additional arguments with this method.
Console.exception()
An alias for error().
Console.group()
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
Console.groupCollapsed()
Creates a new inline group, indenting all following output by another level. However, 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().
Console.groupEnd()
Exits the current inline group.
Console.info()
Informative logging of information. You may use string substitution and additional arguments with this method.
Console.log()
For general output of logging information. You may use string substitution and additional arguments with this method.
Console.profile()
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
Console.profileEnd()
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
Console.table()
Displays tabular data as a table.
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.
Console.timeEnd()
Stops the specified timer and logs the elapsed time in seconds since it started.
Console.timeStamp()
Adds a marker to the browser's Timeline or Waterfall tool.
Console.trace()
Outputs a stack trace.
Console.warn()
Outputs a warning message. You may use string substitution and additional arguments with this method.

Usage

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 console.log(), console.info(), console.warn(), and console.error() methods respectively. Each of these results in output 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 objects 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})

Using string substitutions

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 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 or %O Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %i Outputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%s Outputs a string.
%f Outputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10

Note: Precision formatting doesn't work in Chrome

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.

Styling console output

You can use the %c directive to apply a CSS style to console output:

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
 
 

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.

 

Using groups in the console

Requires Gecko 9.0(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

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

Timers

Requires Gecko 10.0(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

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 the only parameter. To stop the timer, and to get the elapsed time in milliseconds, 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 console.trace(). Given code like this:

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

foo();

The output in the console looks something like this:

Specifications

Specification Status Comment
Console API Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 4Edge Full support YesFirefox Full support 2IE Partial support 8
Notes
Partial support 8
Notes
Notes Only functions when developer tools are opened. Otherwise, the 'console' object is undefined.
Opera Full support 10.1Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support 3.2Samsung Internet Android Full support Yes
Available in workersChrome Full support YesEdge Full support YesFirefox Full support 38IE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 38Opera Android ? Safari iOS ? Samsung Internet Android ?
assertChrome Full support YesEdge Full support 12Firefox Full support 28IE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 28Opera Android ? Safari iOS ? Samsung Internet Android ?
clearChrome Full support YesEdge Full support 12Firefox Full support 48IE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 48Opera Android ? Safari iOS ? Samsung Internet Android ?
countChrome Full support YesEdge Full support 12Firefox Full support 30IE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 30Opera Android ? Safari iOS ? Samsung Internet Android ?
countResetChrome Full support YesEdge ? Firefox Full support 62IE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 62Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
dir
ExperimentalNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 8IE Full support 9Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 8Opera Android ? Safari iOS ? Samsung Internet Android ?
dirxml
ExperimentalNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
errorChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 8Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Alias for Console.error
DeprecatedNon-standard
Chrome No support NoEdge Full support 13Firefox Full support 28IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 28Opera Android ? Safari iOS No support NoSamsung Internet Android No support No
groupChrome Full support 2Edge Full support 12Firefox Full support 4IE Full support 11Opera Full support YesSafari Full support 4WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
groupCollapsedChrome Full support 6Edge Full support 12Firefox Full support 52IE Full support 11Opera ? Safari Full support 5.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 52Opera Android ? Safari iOS ? Samsung Internet Android ?
groupEndChrome Full support 2Edge Full support 12Firefox Full support 9IE Full support 11Opera Full support YesSafari Full support 4WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 9Opera Android ? Safari iOS ? Samsung Internet Android ?
infoChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 8Opera Full support YesSafari Full support Yes
Notes
Full support Yes
Notes
Notes No information icon
WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
logChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 8Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
profile
ExperimentalNon-standard
Chrome Full support 53Edge Full support 12Firefox Full support YesIE Full support YesOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 10Opera Android ? Safari iOS ? Samsung Internet Android ?
profileEnd
ExperimentalNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 10Opera Android ? Safari iOS ? Samsung Internet Android ?
tableChrome Full support YesEdge Full support 13Firefox Full support 34IE No support NoOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 34Opera Android ? Safari iOS ? Samsung Internet Android ?
timeChrome Full support 2Edge Full support 12Firefox Full support 10IE Full support 11Opera Full support YesSafari Full support 4WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 10Opera Android ? Safari iOS ? Samsung Internet Android ?
timeEndChrome Full support 2Edge Full support 12Firefox Full support 10IE Full support 11Opera Full support YesSafari Full support 4WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 10Opera Android ? Safari iOS ? Samsung Internet Android ?
timeLogChrome No support No
Notes
No support No
Notes
Notes See bug 854474.
Edge No support NoFirefox Full support 62IE No support NoOpera No support NoSafari No support No
Notes
No support No
Notes
Notes See bug 186833.
WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 62Opera Android ? Safari iOS No support NoSamsung Internet Android No support No
timestamp
ExperimentalNon-standard
Chrome Full support YesEdge ? Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 10Opera Android ? Safari iOS ? Samsung Internet Android ?
traceChrome Full support YesEdge Full support 12Firefox Full support 10IE Full support 11Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 10Opera Android ? Safari iOS ? Samsung Internet Android ?
warnChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 8Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

Notes

  • At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.
  • Prior to Gecko 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.
  • It's worth noting that the Firefox's built-in Console object is compatible with the one provided by Firebug.

See also

Other implementations

文件標籤與貢獻者

此頁面的貢獻者: Syihoy, porfirion
最近更新: Syihoy,