JavaScript Console Object
Category Programming Techniques
The Console object is used for JavaScript debugging.
The Console object is not inherently present in JavaScript; it is a built-in object provided by the host (i.e., the browser) for accessing the debugging console, which may vary in appearance across different browsers.
The Console object has two common uses:
Displaying error messages when the web page code is running.
Providing a command-line interface for interaction with the web page code.
For example, in the Chrome browser, you can open the Console window by pressing F12 or Control+Shift+i (on PC platforms) / Alt+Command+i (on Mac platforms).
Console Object Methods
Method | Description | Example |
---|---|---|
assert() | The assert method accepts two arguments; the first is an expression, and the second is a string. It only outputs the second argument when the first argument is false, otherwise, there is no result. | // Example<br>console.assert(true === false, "The condition is not met")<br>// Assertion failed: The condition is not met |
clear() | Clears all output in the current console, resetting the cursor to the first line. | console.clear() |
count() | Used for counting, outputting how many times it has been called. | (function() {<br> for (var i = 0; i < 5; i++) { <br> console.count('count'); <br> }<br>})(); |
error() | Outputs information with a red cross in front, indicating an error, and also displays the stack where the error occurred. | console.error("Error: %s (%i)", "Server is not responding", 500) |
group() | Used to group displayed information, allowing the information to be collapsed and expanded. | console.group('First Level');<br> console.group('Second Level');<br> console.log('error');<br> console.error('error');<br> console.warn('error');<br> console.groupEnd(); <br>console.groupEnd(); |
groupCollapsed() | Very similar to the console.group method, the only difference is that the content of this group is collapsed when first displayed, rather than expanded. | console.groupCollapsed('First Level');<br> console.groupCollapsed('Second Level');<br> console.log('error');<br> console.error('error');<br> console.warn('error');<br> console.groupEnd(); <br>console.groupEnd(); |
groupEnd() | Ends an inline group | console.group('Group One');<br>console.group('Group Two');<br>// some code<br>console.groupEnd(); // Ends Group Two<br>console.groupEnd(); // Ends Group One |
info() | An alias for console.log, outputs information | console.info("tutorialpro") |
log() | Outputs information | console.log("tutorialpro") |
table() | Converts composite data types into a table for display. | var arr= [ <br> { num: "1"},<br> { num: "2"}, <br> { num: "3" }<br> ];<br>console.table(arr);<br>var obj= {<br> a:{ num: "1"},<br> b:{ num: "2"},<br> c:{ num: "3" }<br>};<br>console.table(obj); |
time() | Starts timing | console.time('Timer 1');<br>for (var i = 0; i < 100; i++) {<br> for (var j = 0; j < 100; j++) {}<br>}<br>console.timeEnd('Timer 1');<br>console.time('Timer 2');<br>for (var i = 0; i < 1000; i++) {<br> for (var j = 0; j < 1000; j++) {}<br>}<br>console.timeEnd('Timer 2'); |
timeEnd() | Ends timing | console.time('Timer 1');<br>for (var i = 0; i < 100; i++) {<br> for (var j = 0; j < 100; j++) {}<br>}<br>console.timeEnd('Timer 1');<br>console.time('Timer 2');<br>for (var i = 0; i < 1000; i++) {<br> for (var j = 0; j < 1000; j++) {}<br>}<br>console.timeEnd('Timer 2'); |
trace() | Traces the function call process | function d(a) { <br> |
To see how a function is called, simply add the console.trace() method to it.
function add(a, b) {
console.trace();
return a + b;
}
var x = add3(1, 1);
function add3(a, b) { return add2(a, b); }
function add2(a, b) { return add1(a, b); }
function add1(a, b) { return add(a, b); }
Console output information:
8. Timing Features
console.time()
and console.timeEnd()
are used to display the running time of the code.
Example
console.time("Console Timer One");
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) { }
}
console.timeEnd("Console Timer One");
9. Performance Analysis with console.profile()
Performance analysis (Profiler) is the process of analyzing the running time of various parts of a program to identify bottlenecks, using the method console.profile()
.
Example
function All() {
alert(1);
for (var i = 0; i < 10; i++) {
funcA(1000);
}
funcB(10000);
}
function funcA(count) {
for (var i = 0; i < count; i++) { }
}
function funcB(count) {
for (var i = 0; i < count; i++) { }
}
console.profile('Performance Profiler');
All();
console.profileEnd();