loading...
Cover image for know more about javascript console.log( ) Tips and Ttricks

know more about javascript console.log( ) Tips and Ttricks

dip15739 profile image Dip Vachhani ・5 min read

The console.log( ) command

The first thing we can do is log the console object itself to see what your browser of choice actually offers.

console.log(console);

This command will output the various properties of the console object as the browser knows them. Most of them are functions and will be rather consistent regardless of browser. If there are differences in the properties of the console object from one browser to another, this way you can see the differences. One such difference I can point out between Firefox and Chrome is that Chrome provides a “memory” property that outputs some basic memory usage stats. Firefox doesn’t provide this property and yet has a “name” property that Chrome does not have.

console.table( )

In previous examples, we’ve seen what happens when we put an array or object inside a console.log() or console.dir(). There’s another option for these data types for a more structured display, which is console.table().

Here’s a simple example with an array:

let basicArray = [
  'one',
  'two',
  'three'
];
console.table(basicArray);

Chrome basic array table() example

Firefox basic array table() example

Styling the output

Another potentially useful and fun thing is that you can apply CSS styles to the console’s output. It works just like the string substitution method where you insert a %c variable for styles to be applied from the parameters.

Here’s a simple example:

console.log('%cThis is large red text', 'color: red; font-size: 30px;');

Chrome styling in the console

Firefox styling in the console

With some work and experimenting, you could create interesting messaging within the console. One idea is to draw extra attention to a particular log, especially an error of some sort.

console.log('%cHello there!', `
  background: white;
  border: 3px solid red;
  color: red;
  font-size: 50px;
  margin: 40px;
  padding: 20px;
`);

Chrome custom styling

console.dir( ) & console.dirxml( )

The main idea behind these two commands is to display either properties of a Javascript object with console.dir() or descendant elements of an XML/HTML element with console.dirxml(). It appears Chrome has these implemented as expected, while Firefox just uses both as aliases for console.log().

Let’s give console.log(), console.dir(), and console.dirxml() the same simple object to see what we get. Keep in mind that you normally would not log an object with console.dirxml().

const count = {
  one: 'one',
  two: 'two',
  three: 'three'
};

console.log(count);
console.dir(count);
console.dirxml(count);

Chrome dir() and dirxml() example

Firefox dir() and dirxml() example

console.assert( )

The console.assert() command is similar to the error command mentioned previously. The difference is that asserting allows for the usage of a boolean condition to determine whether it should output the text to the console.

For example, let’s say you wanted to test the value of a variable and make sure it wasn’t larger than a certain number value. If the variable is below that number and the condition resolves to true, the assert command does nothing. If the condition resolves to false, then the output text is displayed. This way you don’t have to wrap a console.error() command with an if statement to determine if the error message is needed in the first place.

let value = 10;
console.assert(value <= 7, 'The value is greater than 7.');

Chrome assert() example

Firefox assert() example

console.count( )

Ever wonder how many times a certain thing happens in your code? For instance, how many times does a particular function get called during a sequence of events? That’s where the console.count() command can help out.

By itself, the count command is rather simple and has limited use. If you use the command in its default state you only get a simple count. For example, if we call it three times in a row, we get a sequential count.

console.count();
console.count();
console.count();

Chrome default count() example

console.time( ), console.timeLog( ), console.timeEnd( )

Here we have a simple way to log how long something takes to complete. We call console.time() with a label, call console.timeLog() with the same label for an update, and call console.timeEnd() again with the same label to stop the timer.

console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');

Chrome time() example

Firefox time() example

console.group( ) & console.groupEnd( )

Here’s a simple one: Group different console outputs together to show a form of relationship among them. It is somewhat limited in features so its usefulness will depend a great deal on how you plan to use it. This is the console.group() command.

You can also nest the groups. The console.groupEnd() command simply refers to the last opened group.

console.group('outer group');
console.log('outer one');
console.log('outer two');
console.group('inner group');
console.log('inner one');
console.log('inner two');
console.log('inner three');
console.groupEnd();
console.log('outer three');
console.groupEnd();

Nested group() example


console.trace( )

Another very useful one! When debugging deeply nested objects or functions, we may want to print the stack trace of the code. Call console.trace( ) from within the function you want at the top of the call stack, to see the exact places in the code that called it

Discussion

pic
Editor guide