For debugging of our JavaScript code, we use console.log object a lot. This helps us to determine and troubleshoot the issue in web application in the browser, so it is only available to the browser’s developer mode (F12).
There are few more members of this Object and that can make our debugging a lot easier.
1. Tracing of the Operation/Step –
- console.log() – this is used for logging any type of message in the console.
- console.warn() – it prints the message in the console as a warning with method information with a yellow warning sign.
- console.info() – it prints the information in console. It can be used interchangeably with console.log but the purpose of using console.info restricts the messages to be information type.
- console.error() – It prints the console message with a red icon and can be very easily identifiable.
- console.trace() – it provides the stack trace of the method where it is being called from.
- console.count() – It gives the count of a specific method call.
2. Grouping of logs
- console.group() – This can be used to group similar logs. By default, it will be expanded. It can have nesting of other groups as well.
- console.groupEnd() – it marks the end of any group.
- console.groupcollapsed() – it is the same as console.group but it remains collapsed by default.
3. Display of logs
- console.clear() – if you don’t need previous logs and want to start over, Console.clear will clear the console and only subsequent logs will be written thereafter.
- console.table() – This is a very useful way of viewing the data in tabular format. This table can be sorted by any column by clicking any header.
- Case a) If we are passing an array as parameter, then it shows the first column as the index.
- Case b) If the passed parameter is an object then we can have a custom column.
4. The execution time of operation –
- console.time() – It marks the start of any operation. We can also use a label to make it identifiable among many times.
- console.timeEnd() – It marks the end of any operation and printed with the used label.
There are few more methods in console object but most of them are not standard and not supported by all the browsers.
Complete code used in this article is available here for your practice and effective JavaScript debugging-
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript console Introduction</h1>
<script>
console.log("My New Log");
console.info("this is info log");
console.error("Error log");
console.warn("Warning log");
console.group("Parent Group");
console.groupCollapsed("My New Group");
console.log("Begininig of the group");
console.log("Log Number #1");
console.log("Log Number #2");
console.log("Log Number #3");
console.groupEnd();
console.log("Out of the Group now");
console.groupEnd();
console.clear();
console.table(["taagung", "C# Corner", "MSDN"]);
function Article(authorName, articleName) {
this.authorName = authorName;
this.articleName = articleName;
}
var author = {};
author.atul = new Article("Atul Sharma", "SOUND Programming Methodology");
author.tuba = new Article("Tuba Mansoor", "Angular Tutorial");
author.mahesh = new Article("Mahesh Chand", "C# Corner Plateform");
console.table(author);
myFirstMethod();
function myFirstMethod() {
mySecondMethod();
}
function mySecondMethod() {
myThirdMethod();
}
function myThirdMethod() {
console.trace();
}
TimeElapsed();
function TimeElapsed() {
console.time("PositiveForloopTime");
for (var i = 0; i < 100000; i++) {
}
console.timeEnd("PositiveForloopTime");
console.time("NegativeForloopTime");
for (var i = 100000; i < 0; i--) {
}
console.timeEnd("NegativeForloopTime");
}
CalledFunction();
CalledFunction();
CalledFunction();
function CalledFunction() {
console.count("Called Count");
}
</script>
</body>
</html>