DEV Community

loading...
Cover image for Super powers of Javascript Console

Super powers of Javascript Console

kalashin1 profile image Kinanee Samson ・4 min read

Chances are if you are a JavaScript developer then you might have used the console object more times than you blink your eye. That's a big exaggeration but i just wanted to point out just how much the console object is important to JavaScript developer and most notably it's log() Method.

Console Object

The console object exists on the window object in JavaScript in the browser and it gives us access to the debug console that comes built in with most browsers by default. We can access the console object in any scope.

In node js the console object is also available globally from any scope, it provides a debugging console that is similar to that of the web browser, however it provides a console class with which we can create and configure a console instance which we write to.

console object

There are quite a handful of methods available on the console object which we can use for debugging, most notably is the log method;

console.log()

This method simply writes a message to the console, it accepts an argument which is the object we want to log to the console. The object can be of any data type e.g strings, numbers, booleans, arrays, objects, maps e.t.c

console.log("some message") 
// some message
console.log({name: 'john', friend: 'doe'})
// {name: 'john', friend: 'doe'}
Enter fullscreen mode Exit fullscreen mode

This is just a simple demonstration of the log() method on the console object, a more useful and pratical case is to use it to output certain variables at certain stages in your code especially when there is bug, so you can pin point exactly where the error is coming from, and how to deal with it. But do ensure that you remove all calls to console.log() when you are don debugging, you could easily forget to.

console.warn()

This is another useful method on the console object, it sends a warning to the console. It lso accepts an argument which will be output to the browsers console.

for (let i = 0; i < 5; i++) {
 if(i%2 !== 0){
 console.warn(`${i} is not an even number`)
 }
}    

// 1 is not an even number
// 3 is not an even number
Enter fullscreen mode Exit fullscreen mode

This is quite useful when we are building packages other developers are going to be uusing, we can use this method to let them know that something could potentially lead to an error or bug in the code if it's not dealt with or stopped as fast as possible.

console.error()

This method allows us to send an error message to the console, like previous methods we have discussed above, the error method also accepts an argument which will be sent to the console.

console.error("oops yous just pushed the wrong button")

// oops yous just pushed the wrong button
Enter fullscreen mode Exit fullscreen mode

The difference between these three is that console.log() Keeps ur console clean, just print out a message to the console, console.warn() Will print out the message along with a warning sign, while console.error() Will log the message with an error sign.

Timing your Process

The console object provides another method which is useful for debugging, it allows us to keep track how long it takes to complete a task. To start a timer u call console.time() And this starts a timer, to end the timer you call console.timeEnd(). This might give you insight to how long your processes are taking to complete, this can also help you refactor your code to be more efficient and avoid unnecessary memory leaks.

console.time()
let name = 'Kal'
name += ' el'
console.log(name.indexOf('K'))
console.timeEnd()
Enter fullscreen mode Exit fullscreen mode

Displaying data in tabular form

You can use console.table() to output a message to the browser, the cool thing about this method is that it displays the data in a tabular form when you pass in an object that has key-value pairs, e.g an array or an object.

const arr = ['foo', 'bar', 'john', 'doe']
console.table(arr)

| index | value |
|   0   |   'foo'   | 
|   1   |   'bar'   |
|   2   |   'john'   | 
|   3   |   'doe'   | 

Enter fullscreen mode Exit fullscreen mode

If this were an object, we would see the keys logged out along with their values just like we get with the array in the example above.

Building a Custom Lodger

if you have node js installed on your computer, you can take advantage of it and build your own custom lodger, i will b giving you a brief intro on doing that.

install node js

To install node js on your computer simply head to nodejs.org and download the most stable version,

Lodger

On node js we have the console class which is globally available. It is to note that the console on node js works similar to that of the browser. You can create an instance of a console from this console class, let's see how.

const fs = require("fs");

// creating writeStreams that will be used by our Console class.
const outStream = fs.createWriteStream('./log.txt')
const errStream = fs.createWriteStream('./errLog.txt')

// when we instantiate the Console class it takes in two arguments, they mudt be writeable streams

const Lodger = new console.Console(outStream, errStream)

Lodger.log('hello worl')
Lodger.warn('stop doing that')
Lodger.error('you touched the wrong button')

Enter fullscreen mode Exit fullscreen mode

Inspect the directory you are working with and you will see that two files have been created for ud;

  • log.txt
  • errLog.txt

The log.txt will hold our normal logs and warnings, e.g Loger.log() and Lodger.warn(). Our error logs will be sent to errLog.txt and that's it, done!

That's it fir this article, there aremore methods available to the console object, you can check here for more on the, i hope you find this useful.

Discussion (0)

pic
Editor guide