console in JavaScript - GeeksforGeeks

11 Feb, 2022
Web console
A Web console is a tool which is mainly used to log information associated with a web page like: network requests, JavaScript, security errors, warnings, CSS etc. It enables us to interact with a web page by executing JavaScript expression in the contents of the page.  
Console object
In JavaScript, the console is an object which provides access to the browser debugging console. We can open a console in web browser by using: Ctrl + Shift + I for windows and Command + Option + K for Mac. The console object provides us with several different methods, like :  
log()
error()
warn()
clear()
time() and timeEnd()
table()
count()
group() and groupEnd()
custom console logs
Let’s look at all these methods one by one.  
console.log()
Mainly used to log(print) the output to the console. We can put any type inside the log(), be it a string, array, object, boolean etc.  
javascript
// console.log() methodconsole.log('abc');console.log(1);console.log(true);console.log(null);console.log(undefined);console.log([1, 2, 3, 4]); // array inside logconsole.log({a:1, b:2, c:3}); // object inside log
Output:  
 
console.error()
This method is used to log error message to the console. Useful in testing of code. By default the error message will be highlighted with red color.  
javascript
// console.error() methodconsole.error('This is a simple error');
Output:  
 
console.warn()
Used to log warning message to the console. By default the warning message will be highlighted with yellow color.  
javascript
// console.warn() methodconsole.warn('This is a warning.');
Output:  
 
console.clear()
Used to clear the console. The console will be cleared, in case of Chrome a simple overlayed text will be printed like : ‘Console was cleared’ while in Firefox no message is returned.  
javascript
// console.clear() methodconsole.clear();
Output:  
 
console.time() and console.timeEnd()
Whenever we want to know the amount of time spend by a block or a function, we can make use of the time() and timeEnd() methods provided by the JavaScript console object. They take a label which must be same, and the code inside can be anything( function, object, simple console).  
javascript
// console.time() and console.timeEnd() methodconsole.time('abc'); let fun =  function(){     console.log('fun is running'); } let fun2 = function(){     console.log('fun2 is running..'); } fun(); // calling fun(); fun2(); // calling fun2();console.timeEnd('abc');
In the above code snippet, we can see that the label is ‘abc’ which is same for both the time() and the timeEnd() method. If we increase the amount of code inside the block defined by these methods, then the time will increase. It is also worth remembering that the time returned to the console will be in milliseconds and might be different each time we refresh the page. Output:  
 
console.table()
This method allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.  
javascript
// console.table() methodconsole.table({'a':1, 'b':2});
Output:  
 
console.count()
This method is used to count the number that the function hit by this counting method.  
javascript
// console.count() methodfor(let i=0;i<5;i++){    console.count(i);}
output:  
 
console.group() and console.groupEnd()
group() and groupEnd() methods of the console object allows us to group contents in a separate block, which will be indented. Just like the time() and the timeEnd() they also accepts label, again of same value.  
javascript
// console.group() and console.groupEnd() methodconsole.group('simple');  console.warn('warning!');  console.error('error here');  console.log('vivi vini vici');console.groupEnd('simple');console.log('new section');
Output:  
 
Custom Console Logs
User can add Styling to the console logs in order to make logs Custom . The Syntax for it is to add the CSS styling as a parameter to the logs which will replace %c in the logs as shown in the example below .  
javascript
// Custom Console log example  const spacing = '10px';  const styles =        `padding: ${spacing}; background-color: white; color: green; font-style:         italic; border: 1px solid black; font-size: 2em;`;  console.log('%cGeeks for Geeks', styles);
Output:  
 
Console Sidebar
Console sidebar is used to organize logs and provides clarity in debugging experience.  
After Filtering Errors only using console sidebar :  
After Filtering Warnings only using console sidebar :  
Supported Browser:
Google Chrome
Firefox
Internet Explorer
Opera 
ShJos
ysachin2314
amansingla
javascript-basics
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
How to Use the JavaScript Fetch API to Get Data?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?