JavaScript “console” Object Hacks part 1

JavaScript is the language of Web. Website without JS like body without soul. JS is the first choice of developer not due to its flexibility but also due to web console. Web console make debugging superfast and allow developers to make new change on the go.

In this session, I will give you some about cool tips about console and “console”. I will try to keep it short and concise, I will share you more tips when I get.

first open your JS console , using Ctrl + Shift + i or press F12 or using your browser preferences.

Let first understand “console” little bit. Type “console” on browser console then,

>> console

There are a lot of method instead of just log(). So let us explore some of them

  1. info -> This is use to represent some information in console, it prints message with “i” inside a small circle in starting of message.

2. warn -> This is use to show some warning on console. It contains message with (!) and in yellow color.

3. error -> It show a error like wrong arithmetic operations, this method show either a “! inside in red circle” or “cross in red circle” before the output depend on your browser with background color red.

Firefox Output
Brave Output 

4. table -> this is use for table representation of array and object. “A picture can express equivalent to 1000 words”. It is very helpful in understanding data fetched from an API.

Representation of object
Representation of array
var 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']);

I am programmer and web developer who loves to teach