JavaScript Console

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);

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

• asset
• clear
• count
• countReset
• debug
• dir
• dirxml
• error
• group
• groupCollapsed
• groupEnd
• info
• log
• profile
• profileEnd
• table
• time
• timeEnd
• timeLog
• timeStamp
• trace
• warn

---

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

specifier	output
%s	Format the value as a string
%i or %d	Format the value as an integer
%f	Format the value as a floating-point value
%o	Format the value as an expandable DOM element
%O	Format the value as an expandable JavaScript object
%c	Applies 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');

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
);

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"

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']);

---

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);

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)

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)

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

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');

---

---