There is more to Console than log()!!! 😃

Logging values in the console is the way we actually do to debug our code. But there is more to console than simply log(). In this blog, I tell you about the various practice of console that can be used in the javascript code.

Firefox Multi-Line editor console 💁

If you ever used the firefox multi-line editor, this is the right time to get to know about the editor. Open your firefox and press CTRL+SHIFT+K that will open a multi-line editor tool. You can write multiple lines as you want and execute. Below is the simple example which is demonstrated for you.

Example:

let x = 1
let y = 2
let z = 3
// to print all the values
console.log({x, y, z})

and press CTRL+ENTER to run your code. You can see your output like this.

Object { x: 1, y: 2, z: 3 }

You can also try this using object.

Variables within the log 😃

Instead of declaring variables, you can simply log it by using,

console.log("%s secured %d marks"., "John", 90)

You can see that %s is John and %d as 90. The output of the statement will be like, “John secured 90 marks”.

Types of logs 😇

console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')

The above-mentioned logs also include default styling, such as “warn- colored as yellow” and “error-colored as red”.

Optional logs can be used 😉

You can conditionally print the console logs by using “assert”.

let isItWorking = false
console.assert(isItWorking, "this is the actual reason")

If the argument “isItWorking is said to be false” it will execute. If it is said to be true, it won’t execute.

Counting 😯

You can also count in the console, excited?

for(i=0; i<10; i++){
  console.count()
}

Each iteration of the loop will print count in the console. You can see the output as “default:1”,….”default:10". If you want to reset the counter, use the console.countReset().

for(i=0; i<10; i++){
  console.count()
}
console.countReset()

Trace 😀

You can also do a stack trace inside the function.

function first() {
  second()
}
function second() {
  third()
}
function third() {
  console.trace()
}
first()

You can get the output as,

VM313:2 console.trace
third @ VM313:2
second @ VM213:2
first @ VM144:2
(anonymous) @ VM339:1

Tables ✊

One of my favorite while reading about the console is the console.table(). So let’s set up a simple data to be logged as a table.

Example

let languages = [
  {
    name: 'reactjs',
    technology: 'FrontEnd framework'
  },
  {
    name: 'nodejs',
    technology: 'BackEnd framework'
  }
]

Now, we can log this by using console.table(languages). You could get an output,

Wait!!. There is also some better info. If you want to display a particular field in the table you can log it as the console.table(languages,” name”)

Clear 👀

If you are trying to debug an issue using logs, you may be refreshing a lot and your console may get cluttered.

Just add console.clear() to the top of your code and you'll have a fresh console every time you refresh. 😀

Style 👈

Actually you can also add styles to your console. To add the specific style, you have to add %c as style argument.

console.log("%c This is red text on a yellow background.", "color:red; background-color:yellow")

Try these and get to know much about the console. Thanks for reading!!!.