JavaScript Console Tricks

These 5 ways and tips for console objects are essential!

Will console.log still serve as your primary debugging tool for JavaScript?

It's time to brush up on your knowledge and learn how to use the JavaScript console object to its maximum potential.

These cutting-edge techniques, such as console.table and console.time, can help you enhance the calibre and readability of your debug output and make it simpler to identify and correct issues with your code.

The problem

Using only console.log has a number of drawbacks, one of which is that it can clog up your code and make it challenging to read. Additionally, on its own, it doesn't provide much information. It doesn't provide any context or additional information; it simply prints the value of anything you feed it.

In light of this, here are eleven JavaScript console object methods and tricks you ought to be aware of (and try out; I know it's quicker to just use console.log, but it can improve your debugging experience; do it for your own future!).

console.table

With the help of this technique, you can produce tabular data in a clear and comprehensible manner. Console.table will display the data in a tabular style, which is simpler to scan and understand, as opposed to simply logging out an array or object.

// Output an array of objects as a table
const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' }
];
console.table(users);

The objects will be displayed as rows and the properties of each object will be displayed as columns in a tabular representation of the users array.

console.group

console.group and console.groupEnd. These methods allow you to create a nested, collapsible group in the console. This can be useful for organizing and structuring your debug output, so you can easily see what's happening at different levels of your code.

console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();

This will create a nested, collapsible group in the console with the heading “User Details.” The log messages inside the group will be indented and grouped together.

console.time

console.time and console.timeEnd. These techniques let you calculate how long it takes a block of code to run. This might help you locate and optimize performance bottlenecks in your code.

console.time('Fetching data');
fetch('https://reqres.in/api/users')
  .then(response => response.json())
  .then(data => {
    console.timeEnd('Fetching data');
    // Process the data
  });

This will track how long it takes to parse the JSON response and fetch data from the provided URL. The console will display the passing time.

console.assert

With the help of this technique, you may add statements to your code that must always be true—assertions. Console.assert will emit an error message to the console if an assertion fails. This can help you find flaws and make sure your code is operating as it should.

function add(a, b) {
  return a + b;
}
// Test the add function
const result = add(2, 3);
console.assert(result === 5, 'Expected 2 + 3 = 5');

If the add function returns anything other than the anticipated result of 5 when given the input values of 2 and 3, an error message will be displayed in the console.

Style your logs

In order to output styles and colours, use the console object. Your debug output will be more readable and understandable if you use the console object, which enables you to produce text in a variety of colours and styles.

In your console, you can use the%c placeholder. To set a CSS style for the output text, log statements are used.

console.log('%cHello world!', 'color: red; font-weight: bold;');

Using the chosen CSS style, this will produce the words "Hello world!" in bold and red.

console.trace

Create a stack trace by using the console.trace method. This can help you understand how your code is being executed, as well as pinpoint the source of a specific log message.

function foo() {
  console.trace();
}
function bar() {
  foo();
}
bar();

A stack trace of the function calls leading up to the console.trace call will be printed in the console as a result.

console.dir

If you want to output an object's properties in a hierarchical style, use the console.dir method. This can be helpful for discovering an object's structure as well as all of its attributes and functions.

const obj = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'New York',
    zip: 10001
  }
};
console.dir(obj);

This will display the obj object's properties in a hierarchical fashion, enabling you to see the object's structure as well as all of its attributes and values.

console.count

To get the number of times a certain log message has been output, use the console.count method. This can be helpful for tracking the frequency with which a specific code path is executed and for locating trouble spots in your code.

function foo(x) {
  console.count(x);
}
foo('hello');
foo('world');
foo('hello');

In the console, this will print the word "hello" and the number 1. The word "world" will then be produced in the console, followed by the number 1. The string "hello" will be output once more before being followed by the number 2. (since it has been called twice).

console.clear

To clear the output from the console, use the console.clear function. This can help you focus on the information you're interested in by keeping your debug output structured and clutter-free.

console.log('Hello world!');
console.clear();
console.log('This log message will appear after the console is cleared.');

This will produce a blank line after the string "Hello world!" on the console (since the console is cleared). The string "This log message will appear after the console is cleaned" will then be produced.

console.profile

To evaluate the effectiveness of a piece of code, use the console.profile and console.profileEnd methods. This might be helpful for pinpointing performance bottlenecks and accelerating and streamlining your code.

console.profile('MyProfile');
// Run some code that you want to measure the performance of
for (let i = 0; i < 100000; i++) {
  // Do something
}
console.profileEnd('MyProfile');

Between the console.profile and console.profileEnd calls, this will begin profiling the block of code, and when the console.profileEnd call is made, the results will be output in the console. The time it took to execute the code and any other performance-related information will be included in the output.

Conclusion

Don't limit yourself to using console.log; the JavaScript console object offers a wealth of additional useful and powerful tools and methods.

These techniques, which range from console.table to console.time, will assist you in enhancing the calibre and readability of your debug output and making it simpler to identify and resolve issues with your code.

I sincerely hope that the majority of you find the approach covered here to be helpful. Thank you for reading, and please feel free to leave any comments or questions in the comments section below.