Learn how to use the browser console effectively for debugging
You can open console by using:
Chrome → Ctrl Shift J (on Windows) or Cmd Option J (on Mac)
Safari → Option-Cmd-C
The console object provides access to the browser’s debugging console. The console object present in the global scope.
console.log(messages)
Outputs a message(variable) to the web console.
console.log("hello");
hello
var a =10;
console.log(a);
10
var b = 20;
console.log(a, b);
10, 20
// we can also evaluate expression
console.log(a+b);
30
console.log(`${a} + ${b} = ${a+b}`);
10 + 20 = 30
var obj = {name : "Javascript Jeep"};
console.log(a, b, obj)
10 20 {name: "Javascript Jeep"}
console.clear()
This will remove all the console message and prints Console was cleared.
console.clear();
console.assert(condition, failure message)
The console.assert method is an easy way to run simple assertion tests.
var a = 10;
console.assert(a === 10, "This will not be printed");
console.assert(a != 10, "this will be printed", `a = ${a}`);
// Assertion failed: this will be printed a = 10
console.count()
Logs the number of times that this particular call to count() has been called.
function test() {
console.count();
}
test(); // default : 1
test(); // default : 2
test(); // default : 3
Example 2 :
We can also use label to it
function test(label) {
console.count(label);
}
test("Times"); // Times: 1
test("Num"); // Num: 1
test("Times"); // Times: 2
test("Num"); // Num: 2
test("Times"); // Times: 3
test("Num"); // Num: 3
console.countReset()
Resets the counter. This function takes an optional argument label.
console.count(); default: 1
console.count(); default: 2
console.count(); default: 3
console.countReset()
console.count(); default: 1
console.count("time"); time: 1
console.count("time"); time: 2
console.count("time"); time: 3
console.countReset()
console.count("time"); time: 1
Siblings of console.log
console.info()
Prints a message to the console.
console.info("this is a info");
Only in Firefox, a small “i” icon is displayed next to these items in the console’s log.
Other than this, it is similar to console.log method.
console.warn()
Outputs a warning message to the console.
console.warn("this is a warning ⚠️ ");
Example
let temp = 90;
if(temp > 90) {
console.warn("Temp is high");
}
The warning message will be printed with a yellow background.
console.error()
Outputs an error message to the console.
console.error("this is error message");
console.trace()
Output the stack trace to the current function to the console.
function a() {
b();
}
function b() {
c()
}
function c() {
console.trace()
}
function test() {
a();
}
test()
console.dir()
prints out objects in a nice formatted way
var obj = {
"phone" : {
mobile : {
num1 : 123,
num2 : 456,
},
landline : {
num1 : 789
}
},
"name" : "Javascript Jeep"
}
console.dir(obj);
console.dirxml()
It prints out a DOM element’s markup.
console.dirxml(document.body);
// this will display body of the html element
console.time(label) and console.timeEnd(label)
We can start a timer with console.time and then end it with console.endTime. By using this we can find the time taken to execute a function.
function a () {
for(let i = 0 ;i < 10000; i ++) {
// operation;
}
}
console.time();
a();
console.timeEnd(); // default: 0.18896484375ms
console.time("test");
a();
console.timeEnd("test"); // test: 0.35302734375ms
Grouping console messages
console.group("days")
console.log("Mon");
console.log("Tue");
console.log("Wed");
console.log("Thu");
console.log("Fri");
console.log("Sat");
console.log("Sun");
console.groupEnd("days")
We can group inside groups
console.group("days")
console.log("Mon");
console.log("Tue");
console.log("Wed");
console.log("Thu");
console.log("Fri");
console.group("holidays");
console.log("Sat");
console.log("Sun");
console.groupEnd("holidays");
console.groupEnd("days")
console.table(obj)
This prints the objects in table format
var user = {
name : "Ram",
age : 28
}
console.table(user);
var user2 = {
name : "Ram",
age : 28,
address : {
street : "144 straight stree"
}
}
Thanks 😊 🙏 for Reading 📖.
Follow me JavaScript Jeep🚙💨 .
Please make a donation here. 80% of your donation is donated to someone needs food 🥘. Thanks in advance.
Js Jeep 🚙 