Different types of logging in JavaScript

Published July 13, 2020

road stop sign

Photo byJohn Matychuk

Whenever we program an application we need logging of information to know what is happening with the application. It may be for error detection or for simple information logging.

So logging is an essential part of an application and different situations need different types of logging.

Let's discuss some different types of logging available in JavaScript.

General logging using console.log() and console.debug() methods

We generally log information in JavaScript using the console.log() method.

console.log("Hello World!"); // Hello World!

We can pass many log messages as arguments to the console.log() method.

console.log("Hello World!", "How are you?"); // Hello World! How are you?

We can also use the console.log() method to examing contents of an object.

const Earth = {
  name: "Earth",
  age: "A Trillion Years",
};

// log object Earth
console.log(Earth); // {name: "Earth", age: "A Trillion Years"}

We can also log information using the console.debug() method. This is just like the console.log() method but instead, the information logged using this can be seen only if the console is in debugging level.

Examining contents of object using console.dir() method

While you can also examine the contents of objects using the console.log() method, this is no different from the console.dir() method which can also be used to examine the contents of an object.

But there is a slight difference to it.

If you are trying to view the contents of an HTML element using the console.log() method, you would see the content int he console just like how it is represented in plain HTML, not useful if you are trying to view the attributes and all other cool kinds of stuff.

<div id="section">
  <h1>Hello World!</h1>
</div>
// get reference to div tag
const section = document.getElementById("section");

// log contents of div tag using console.log() method
console.log(section);

/*

RESULT:
=======


<div id="section">
    <h1>Hello World!</h1>
</div>


=======
*/

But if you try to view this using the console.dir() method, you could see all the attributes and other cool stuff for the div tag.

// get reference to div tag
const section = document.getElementById("section");

// log contents of div tag using console.dir() method
console.dir(section);

/*

RESULT:
=======

accessKey: ""
align: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null

.
.
.
. etc



=======
*/

Logging error and warnings with console.error() and console.warn() methods

If you want to log an error instead of some information you can use the console.error() method.

// error
console.error("This is a big error 🚫");

screenshot of red error shown in console

The error will be in red color and will also show the line number where the error has happened.

Or if you want to log a warning instead of a pure error, you can use the console.warn() method.

// warning
console.warn("This is just a warning ⚠️");

screenshot of a yellow warning shown in console

Examining content as tabular data using console.table() method

If you want to view your contents of objects in a table-like structure, you can use the console.table() method.

// object
const John = {
  name: "John Doe",
  age: 23,
};

// examine contents in a table like structure
// using console.table() method

console.table(John);

screenshot of John object contents shown in a table format to console

Feel free to share if you found this useful 😃.


Share on: Facebook Twitter