The ultimate guide to web consoles🔥

To debug the code, it is necessary to use the console

The console object provides a debugging console for the browser.

Once the console is mastered, it will help us to debug and understand everything that is happening in the application more organized and faster. So I will try to summarize everything you need to know with examples 🔥

Console log (message)

---

message to the console

    const A = 'World';
    console.log(`Hello ${A}`);

Add style

    console.log('%c Test One', 'color: #bada55; font-size: 20px');

    console.log('%c JavaScript', 'font-weight: bold; font-size: 50px; color: blue; text-shadow: 6px 6px #E485F8, 3px 3px #E485F8;');

• %o / %O-object
• %d / %i-integer
• %s-string
• %f-floating point number

Console information (message)

---

message to the console
If it is Firefox, it will add a i icon

    console.log('This is log');
    console.info('This is info');

Console warning (message)

---

message to the console

    console.warn('This is Warning message');

Console error (message)

---

information to the console

    console.error('This is Error message');

Console trace()

---

Output stack trace to console

    function a() {
      b();
    }
    function b() {
      console.trace();
    }
    function trace() {
      a();
    }
    trace();

console.group() & groupEnd()

---

Packet output

    console.group("Alphabet")
      console.log("A");
      console.log("B");
      console.log("C");
      console.group("Numbers");
        console.log("One");
        console.log("Two");
      console.groupEnd("Numbers");
    console.groupEnd("Alphabet");

console.assert (condition, failure message)

---

    const A = 20;
    console.assert(A === 20, 'This is true');
    console.assert(A === 21, 'This is false');

If true, no message will be printed. When it fails:

Console count()

---

Record the number of times this particular count()

    function count(label) {
      console.count(label);
    }
    count("One");
    count("Two");
    count("One");
    count("One");

console.countReset()

Reset count

    console.count();
    console.count();
    console.countReset();
    console.count();
    console.count("time");
    console.count("time");
    console.countReset("time");
    console.count("time");

Console.dir()

---

Output objects in a formatted way

    const obj = {
      name: "user name",
      email: "[e-mail]",
      tags: ['dev', 'react', 'js']
    };
    console.dir(obj);

Console.dirxml()

---

If possible, output element or JavaScript representation

    <div class="tryRender">
      <span>
        <button>Click Me</button>
      </span>
    </div>
    
    <script>
      console.dirxml(document.querySelector('.tryRender'));
    </script>
    

console.time(label) & timeEnd(label)

---

We can start a timer with console.time and then end it with console.endTime . By using it, we can find the time taken to execute the function

    function a () {
      for(let i = 0 ;i < 10; i ++) {
        // operation;
      }
    }
    
    function b () {
      for(let i = 0 ;i < 10000; i ++) {
        // operation;
      }
    }
    
    console.time();
    a();
    console.timeEnd();
    
    console.time();
    b();
    console.timeEnd();
    

Console table

---

Export objects in table format

    const obj = {
      name: "user name",
      email: "[e-mail]",
      tags: ['dev', 'react', 'js']
    };
    console.table(obj);

console.profile(message) & profileEnd(message)

---

Output message, nothing is displayed unless it is used in the inspector or the inspector is opened

    console.profile('This is profile');
    console.profileEnd('This is profile');
    

Console clear()

---

Delete all console messages and print Console was cleared

console.clear()

---

As Javascript developers, we must have used the console. You may not need all of these, but when your project becomes larger and more complex, some options will facilitate your debugging process💥