Interesting and Most Useful JavaScript Console Functions

   

    In this article, I will discuss interesting & most useful JavaScript console methods.

 

    The console helps to write or print a message from JavaScript.

 

• console.group(message) ,
• console.groupEnd(message) 
• console.groupCollapsed(message)
• console.count() ,
• console.countReset()

 

Above Methods explained in Advance Console API

Read This also - Console Tricks to Become Master In Debugging using DevTool

Let's see the most useful console API : 

 

1 ) console.trace()

 

    console.trace() function helps to trace your function and print console in the stack.

 

Example :

 

const fnOne = () => { fnTwo(); };

 

const fnTwo = () => { fnThree(); };

 

const fnThree = () => { fnFour(); };

 

const fnFour = () => { console.trace(); };

 

fnOne();{codeBox}

    Above example, fnOne() call the function fnTwo, and fnTwo call fnThree like it will trace and print the console of execution order.

Output :

2 ) console.assert()

 

    console.assert() function helps to check assertion test using console , it will throw error when test fail.

 

Example :  

const a = 8;

const b = 4;

const mes = 'a is expected to be less than b';

console.assert(a < b, {a, b, mes});{codeBox}

 

Output : 

 

3 ) console.time()

 

    console.time() function start a new timer in the stack and it runs continuously. to stop the timer call console.timeEnd().

    This console.time() and console.timeEnd() helps to find how much time takes to run function.

Example : 

console.time();

 

for (var i = 0; i < 20000; i++) {

  let cube = i ** 3;

}

 

console.timeEnd();{codeBox}

Output :

 

4 ) console.dir()

 

    console.dir() function helps to print the given object in JSON representation.

 

    console.dir() function accpects HTML DOM object as well as.

Example : 

 

console.dir(document.head); 

 

const superWebsite = {

     name:'attractiveaurora',

     url:'www.attractiveaurora.com'

}

 

console.dir(superWebsite);{codeBox}

Output : 

5 ) console.dirxml()

 

    console.dirxml() function helps to print descendants of the given HTML node in XML representation.

Example : 

console.dirxml(document.head);{codeBox}

Output :

6 ) console.table()

 

    This console.table() function helps to view your object and array in table format.

 

console.table() function accepts object and index arrays and array of objects.

Example : 

 

console.log('Array of object')

 

console.table([

  {

    follows: 'Attractive Aurora',

    link: 'https://www.attractiveaurora.com/',

  },

  {

    follows: 'Medium',

    link: 'https://medium.com/@attractiveaurora',

  },

  {

    follows: 'Facebook',

    link: 'https://www.facebook.com/attractiveaurora',

  },

]);

 

 

console.log('Object')

 

console.table({

    name: 'Attractive Aurora',

    site: 'https://www.attractiveaurora.com/',

  },)

console.log('Indexed Array')

console.table(['Welcome','To','Attractive Aurora']){codeBox}

Output :

 

I will share the remaining API functions in the next article

I think this information is helpful to you.

 

Thanks for reading - Don't Forgot To Share & Comment

Any suggestion or queries please comment, our team will response asps.

 

You may like this : 

 

         Console Tricks to Become Master In Debugging using DevTool

         Chrome 94 DevTools New Features That Every Developer Should Know

         Find Unused JavaScript & CSS Code Using Chrome Dev Tool

         CSS Units That Every Developer Should Know

         Form Validation Styling Using Selector in CSS 3

         Advance CSS Selector Become Expert in CSS3

         Most Useful & Advance CSS3 Pseudo Classes