DEV Community

Cover image for JavaScript Console
Bello Osagie
Bello Osagie

Posted on • Edited on

JavaScript Console

#javascript #tutorial #codenewbie #webdev

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);
Enter fullscreen mode Exit fullscreen mode

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('...')
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode 
// output
16
response time: 2.7529296875 ms

16
response time: 1.0400390625 ms
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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
);
Enter fullscreen mode Exit fullscreen mode

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'} );
Enter fullscreen mode Exit fullscreen mode 
// output
(index) value
0       "Hello"
1       "world"

(index) value
foo     "bar"
bar     "baz"
Enter fullscreen mode Exit fullscreen mode

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']);
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

15.PNG

Syntax:

console.assert(assertion, obj [, type1, ..., typeN]);
console.assert(assertion, string [, type1, ..., typeN]);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

20.PNG

Buy me a Coffee

Top comments (0)

Read next

_ndeyefatoudiop profile image

No one wants to hire you. Now what?

Ndeye Fatou Diop -

elafella profile image

A discussion platform for developers

ElaFella -

bregwin profile image

Testing Troubles with Jest & ESM and how to fix it

Bregwin Jogi -

ashwinkumar0505 profile image

Convert Image to Code : Speed Up Your UI Development with The Snap Code

Ashwin kumar -