Console in JavaScript

A web console serves as a tool for logging various information associated with a web page, including network requests, JavaScript outputs, security errors, CSS, etc. It facilitates interaction with a web page by enabling the execution of JavaScript expressions within the page’s content.

What is a Console Object

In JavaScript, the console object provides access to the browser debugging console. Opening the console in a web browser can be done using Ctrl + Shift + I for Windows and Command + Option + K for Mac.

JavaScript Console Methods

The console object provides us with several different methods.

Let’s look at all these methods one by one.

JavaScript console.log() Method

JavaScript console.log() Method is 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.

Example:

// console.log() method
console.log('abc'); 
console.log(1);
console.log(true);
console.log(null);
console.log(undefined); 
console.log([1, 2, 3, 4]); // array inside log
console.log({a:1, b:2, c:3}); // object inside log

Output:

abc
1
true
null
undefined
(4)[1, 2, 3, 4]
{a: 1, b: 2, c: 3}

JavaScript console.error() Method

JavaScript console.error() Method is used to log an error message to the console. Useful in testing of code. By default the error message will be highlighted with red color.

Example:

// console.error() method 
console.error('This is a simple error'); 

Output:

JavaScript console.warn() Method

JavaScript console.warn() Method is used to log warning message to the console. By default, the warning message will be highlighted with yellow color.

Example:

// console.warn() method 
console.warn('This is a warning.');

Output:

JavaScript console.clear() Method

JavaScript console.clear() Method is 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.

Example:

// console.clear() method 
console.clear(); 

Output:

JavaScript console.time() and console.timeEnd() Method

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).

Example:

// console.time() and console.timeEnd() method 
console.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');

Output: We can see that the label is ‘abc’ which is the same for both the time() and the timeEnd() methods. 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.

JavaScript console.table() Method

JavaScript console.table() 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.

Example:

// console.table() method
console.table({'a':1, 'b':2});

Output:

JavaScript console.count() Method

JavaScript console.count() Method is used to count the number that the function hit by this counting method.

// console.count() method
for(let i=0;i<5;i++){
    console.count(i);
}

Output:

JavaScript console.group() and console.groupEnd() Method

JavaScript 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.

Example:

// console.group() and console.groupEnd() method
console.group('simple');
  console.warn('warning!');
  console.error('error here');
  console.log('vivi vini vici');
console.groupEnd('simple');
console.log('new section');

Output:

JavaScript Custom Console Logs

In JavaScript 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.

Example:

// 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:

JavaScript 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:

In summary, the JavaScript console is a important for web developers, offering various methods to debug and monitor web applications. It helps developers by logging messages, measuring time, creating tables, and customizing logs, making it easier to understand and fix issues. Mastering these console methods improves productivity and gives deeper insights into application behavior. By using the console effectively, developers can resolve coding challenges and gain a better understanding of JavaScript and web development.

immukul

Follow

Improve