console.log(object [, object, ...])
Displays a message in the console. You pass one or more objects to this method, each of which are evaluated and concatenated into a space-delimited string. The first parameter you pass to log() may contain format specifiers, a string token composed of the percent sign (%) followed by a letter that indicates the formatting to be applied.
Dev Tools supports the following format specifiers:
| Format Specifier | Description |
|---|---|
%s |
Formats the value as a string. |
%d or %i |
Formats the value as an integer. |
%f |
Formats the value as a floating point value. |
%o |
Formats the value as an expandable DOM element (as in the Elements panel). |
%O |
Formats the value as an expandable JavaScript object. |
%c |
Formats the output string according to CSS styles you provide. |
Basic example:
console.log("App started");An example that uses string (%s) and integer (%d) format specifiers to insert the values contained by the variables userName and userPoints:
console.log("User %s has %d points", userName, userPoints);
An example of using the element formatter (%o) and object formatter (%O) on the same DOM element:
console.log("%o, %O", document.body, document.body);
The following example uses the %c format specifier to colorize the output string:
console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", userName, userPoints);
console.profile([label])
When the Chrome DevTools is open, calling this function starts a JavaScript CPU profile with an optional label.To complete the profile, call console.profileEnd(). Each profile is added to the Profiles tab.
In the following example a CPU profile is started at the entry to a function that is suspected to consume excessive CPU resources, and ended when the function exits.
function processPixels() { console.profile("Processing pixels"); // later, after processing pixels console.profileEnd();}console.profileEnd()
Stops the current JavaScript CPU profiling session, if one is in progress, and prints the report to the Profiles panel.
console.profileEnd()See console.profile() for example use.
console.time(label)
Starts a new timer with an associated label. When console.timeEnd() is called with the same label, the timer is stopped the elapsed time displayed in the Console. Timer values are accurate to the sub-millisecond.
console.time("Array initialize");var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object();};console.timeEnd("Array initialize");
Note: The string you pass to the time() and timeEnd() methods must match for the timer to finish as expected.
console.timeEnd(label)
Stops the timer with the specified label and prints the elapsed time.
For example usage, see console.time().
console.timeStamp([label])
This method adds an event to the Timeline during a recording session. This lets you visually correlate your code generated time stamp to other events, such as screen layout and paints, that are automatically added to the Timeline.
See Marking the Timeline for an example of using console.timeStamp().
console.trace(object)
Prints a stack trace from the point where the method was called, including links to the specific lines in the JavaScript source. A counter indicates the number of times that trace() method was invoked at that point, as shown in the screen shot below.
It is also possible to pass in arguments to trace(). For example:
console.warn(object [, object, ...])
This method is like console.log() but also displays a yellow warning icon along with the logged message.
console.warn("User limit reached! (%d)", userPoints);
debugger
The global debugger function causes Chrome to stop program execution and start a debugging session at the line where it was called. It is equivalent to setting a "manual" breakpoint in the Sources tab of Chrome DevTools.
Note: The debugger command is not a method of the console object.
In the following example the JavaScript debugger is opened when an object's brightness() function is invoked:
brightness : function() { debugger; var r = Math.floor(this.red*255); var g = Math.floor(this.green*255); var b = Math.floor(this.blue*255); return (r * 77 + g * 150 + b * 29) >> 8;}