Interesting and Most Useful JavaScript Console Functions

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 :


Interesting and Most Useful Javascript Console Functions


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 : 

 

Interesting and Most Useful Javascript Console Functions

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 :

 

Interesting and Most Useful Javascript Console Functions


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 : 


Interesting and Most Useful Javascript Console Functions

Interesting and Most Useful Javascript Console Functions

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 :


Interesting and Most Useful Javascript Console Functions


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 :


Interesting and Most Useful Javascript Console Functions

 

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

1 تعليقات

  1. Casino no deposit bonus codes | GAMBLERSNO!
    › casino-no-deposit-casino-no › casino-no-deposit-casino-no You can also play slot games on slot machine septcasino.com games at one of https://vannienailor4166blog.blogspot.com/ the many online gri-go.com casino bsjeon sites, such as the 1등 사이트 casino.com.

    ردحذف
أحدث أقدم