When you hear console, what is the first thing that comes to mind??
console.log('Am here to help!!');
Yes, most of us know only about console.log when debugging a code in JavaScript. There are several ways to debug a JavaScript code like pressing f12 and putting a breakpoint in the browser, refreshing the page, and debugging happily.
Another way is using the console. By the way, do you know what a console is?
Console
Console is a command-line interface in your browser that executes snippets of code. Let's start with different types of consoles.
Console.log()
This outputs a message to the web console. It may be a single string or objects.
let output = 100
console.log(output)
Console.group()
It creates a group of logs or messages. You can group many log statements with the console.group() and end the same group, use console.groupEnd().
console.group("Programming languages")
console.log("Java")
console.log("C#")
console.log("C++")
console.groupEnd()
Console.groupCollapsed(): This helps to structure your group of messages with a collapse feature. It is represented with a small icon that you can expand to open the logs.
Console.error()
This method writes error messages to the console.
const element = document.getElementById("id");
if (element == null) {
console.error("Error!! Element doesn't exist.");
}
Console.table()
As the name suggests, it writes a table to the console. Pass a table object and write it to the console. The table can be sorted by clicking on the column title.
function Student(Name, Languages) {
this.Name = Name;
this.Languages = Languages;
}
const student = new Student("Anushree", "C#");
console.table(student);
Console.dir()
It displays the list of properties of a JavaScript object. But you might be thinking console.log() can do the same thing. Will explain to you with an example..
<input type="text" id="input" name="input" value="Hashnode!!">
<script>
let inputObj = document.getElementById('input');
console.log(inputObj);
console.dir(inputObj);
</script>
Console.assert()
It displays the message when an assertion is false. When an assertion is true, nothing happens.
let first = 5;
let second = 5;
const result = "not true"
console.assert(first + second == 11, first + second);
It can also help in validating JavaScript elements.
console.assert(document.getElementById("id"), "You have no element with ID 'id'");