JavaScript Console

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

The console.log method is not the only method used in the console.

Check out other console methods besides log by running the code below:

console.dir(console);

Screenshot 2021-05-04 182300.png

If you want to reference each of the console methods, click the links below:


Let's look at a few here:

Measuring time

The start time is console.time(...) while the end time is console.timeEnd(...). The timing is in milliseconds (ms).

See the syntax below:

console.time('...')
.
.
.
console.timeEnd('...')

Note: The same string (e.g. response time) must be used in both the time and timeEnd function

See the example below:

console.time('response time');

alert('Click to continue');
console.timeEnd('response time');

See another example below:

console.time('response time');

const pow = (x, y) => {
  let result = 1; 

  for (let i = 0; i < y; i++) {
    result *= x; 
  } 

  return result;
};

console.log( 'iterative:', pow(2, 4) ); // 16

console.timeEnd('response time');

console.time('response time');
const power = (x, y) => {
  if (y === 1) {
    return x;
  }
  else {
    return power( x, (y-1) ) * x;
  }
};

console.log( 'recursive:', power(2, 4) ); // 16

console.timeEnd('response time');
// output
16
response time: 2.7529296875 ms

16
response time: 1.0400390625 ms

Recursive seems to be faster than iterative looping.

Formating console output

We can also format the output from the console. Below shows a list of common specifiers in JavaScript

specifieroutput
%sFormat the value as a string
%i or %dFormat the value as an integer
%fFormat the value as a floating-point value
%oFormat the value as an expandable DOM element
%OFormat the value as an expandable JavaScript object
%cApplies CSS style rules to the output string as specified by the second parameter

See the examples below:

console.log('%s has %d points', 'Bello', 100); //  Bello has 100 points
console.log('%cHello world!', 'color: blue; font-size: 30px');

1.png

It is possible to apply css rule differently on each word in the console.log

See the example below:

console.log("%cHello %cWorld%c!!", // string to be printed
 "color: blue;", // applies color formatting to the 1st substring
 "font-size: 30px;", // applies font formatting to the 2nd substring
 "/* no CSS rule*/" // does not apply any rule to the remaining substring
);

2.png

Tabular values

The console.table can be used to display objects and arrays in a tabular format.

See the examples below:

console.table( ['Hello', 'world'] );
console.table( {foo: 'bar', bar: 'baz'} );
// output
(index) value
0       "Hello"
1       "world"

(index) value
foo     "bar"
bar     "baz"

6.png

See another fun example below:

const personArr = [
{
 "personId": 123,
 "name": "Jhon",
 "city": "Melbourne",
 "phoneNo": "1234567890"
},
{
 "personId": 124,
 "name": "Amelia",
 "city": "Sydney",
 "phoneNo": "1234567890"
},
{
 "personId": 125,
 "name": "Emily",
 "city": "Perth",
 "phoneNo": "1234567890"
},
{
 "personId": 126,
 "name": "Abraham",
 "city": "Perth",
 "phoneNo": "1234567890"
}
];
console.table(personArr, ['name', 'personId']);

image.png


Clearing the console

Most of the time we clear the console with Ctrl + L but we can also use the console.clear method to clear the console.

console.clear()

Displaying objects

console.dir(object) displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.

const personArr = [
{
 "personId": 123,
 "name": "Jhon",
 "city": "Melbourne",
 "phoneNo": "1234567890"
},
{
 "personId": 124,
 "name": "Amelia",
 "city": "Sydney",
 "phoneNo": "1234567890"
},
{
 "personId": 125,
 "name": "Emily",
 "city": "Perth",
 "phoneNo": "1234567890"
},
{
 "personId": 126,
 "name": "Abraham",
 "city": "Perth",
 "phoneNo": "1234567890"
}
];
console.dir(personArr);

12.PNG

There's also a console.dirxml function that logs the XML (eXtensible Markup Language) representation of the descendant elements of the object if possible, or the JavaScript representation if not.

See the example below:

console.dirxml(document)

14.PNG

Debugging with assertions

The console.assert() method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens - MDN

console.assert('zero' === 0)

15.PNG

Syntax:

console.assert(assertion, obj [, type1, ..., typeN]);
console.assert(assertion, string [, type1, ..., typeN]);

There's an error message to the console only if the assertion is false.

console.assert(true, {key: 'string'}, NaN, Object, undefined); 
console.assert(true, {key: 'string'}, NaN, String, undefined); 
console.assert(true, {key: 'string'}, NaN, undefined);
console.assert(false, {key: 'string'}, NaN, Object, undefined); // error

16.PNG

Other print methods

  • info – a small informative icon (ⓘ) appears on the left side in some browsers' developer tool.
  • warn - a small warning icon (!) appears on the left side in some browsers' developer tool.
  • error - small times icon (⊗) appears on the left side in some browsers' developer tool.
console.info('info - 1 message');
console.warn('warn - 1 message');
console.error('error - 1 message');

20.PNG


No Comments Yet