The easiest way to debug JavaScript code is simply to output the results through the console.log method. It works, but it’s not the most ideal way to do it. If there is a better way, why not explore it?
Use the console skillfully to improve JavaScript debugging performance and page game experience
“Hello from console”
The console object provides access to the browser debugging console. You can only use the Console object if you are running JavaScript code in the browser (that is, client-side code, not server-side code). Different browsers work differently, but usually offer a set of general features. The great thing about debugging statements is that they are compatible with all libraries and frameworks because they are written in the core language.
The most basic use of console.log is to display the output of code. Consider this code:
function sayHello(name) {
console.log(name)
}
sayHello('Indrek')
It records the name passed to the sayHello function.
Use the console skillfully to improve JavaScript debugging performance
“Output name passed to function”
What if we want to know how many times we must call the sayHello function? There is a simple method called console.count().
console.count
Count () prints the number of times it was called using the label. If there are no arguments, count() behaves as if it were called with the default label.
function sayHello(name) {
console.count()
console.log(name)
}
sayHello("Indrek")
sayHello("William")
sayHello("Kelly")
The above code records the following:
Count the number of times we call sayHello
You can count the number of times a function was called, but what if you want to count the number of times a function with the same name was called? One way is to simply pass the name parameter to the count method.
function sayHello(name) {
console.count(name)
}
sayHello("Indrek")
sayHello("William")
sayHello("Kelly")
sayHello("Indrek")
Done! This function keeps track of the number of times we call the function with each name.
Count the number of times we say each name
console.warn
The following method outputs warning messages to the console and is useful when using developer tools or apis. Console.warn is ideal for letting users know that something is wrong, such as omitting parameters or letting developers know that the API/ package version is out of date.
function sayHello(name) { if(! name) { console.warn("No name given") } } sayHello()The above code checks that the name argument is passed to the function. If no name is entered, a warning message is logged, prompting it to consider something.
Display warning messages to users when names are not passed
console.table
Console. table is useful when displaying data if we are dealing with arrays or objects. Each element in the array will be a row in the table. Take the following example, which has an array of fruits. If you pass the Fruits array to the console.table method, you should see a table printed to the console.
const fruits = ["kiwi", "banana", "strawberry"]
console.table(fruits)
And if we look at the console, we should see a table describing arrays.
Display arrays in tabular form using the console to improve JavaScript debugging performance
As you can imagine, this approach can be useful when dealing with larger arrays with hundreds (or even thousands) of values. Here’s an example to illustrate the problem, where arrays have more values.
const fruits = [
"Apple",
"Watermelon",
"Orange",
"Pear",
"Cherry",
"Strawberry",
"Nectarine",
"Grape",
"Mango",
"Blueberry",
"Pomegranate",
"Carambola",
"Plum",
"Banana",
"Raspberry",
"Mandarin",
"Jackfruit",
"Papaya",
"Kiwi",
"Pineapple",
"Lime",
"Lemon",
"Apricot",
"Grapefruit",
"Melon",
"Coconut",
"Avocado",
"Peach"
];
console.table(fruits);
And if we call console.table with an array, we should see the following table.
Display all fruits in a table
Using arrays is simple. What if we’re dealing with objects?
const pets = {
name: "Simon",
type: "cat"
};
console.table(pets);
Instead of logging off values as before, the table displays values and keys and values. What if we have another object and try to list it?
const pets = {
name: "Simon",
type: "cat"
};
const person = {
firstName: "Indrek",
lastName: "Lasn"
}
console.table(pets, person);
As expected, two separate objects appear in two different tables.
Use the console skillfully to improve JavaScript debugging performance
Notice that now we have an object instead of an array. This object has two keys: the name and type of the pet.
Use the console skillfully to improve JavaScript debugging performance
Instead of logging off values as before, the table displays values and keys and values. What if we have another object and try to list it?
const pets = {
name: "Simon",
type: "cat"
};
const person = {
firstName: "Indrek",
lastName: "Lasn"
}
console.table(pets, person);
As expected, two separate objects appear in two different tables.
Use the console skillfully to improve JavaScript debugging performance
Two objects
If we want to pair them in a table, we wrap the objects in an array.
const pets = {
name: "Simon",
type: "cat"
};
const person = {
firstName: "Indrek",
lastName: "Lasn"
}
console.table([pets, person]);
Now we group the objects into a table.
Improve JavaScript debugging performance with the console – HarmonyOS technical community
Group objects by wrapping them in an array
console.group
When using collection or linked data, use nested groups to visually correlate related messages to keep the output in order. To create a new nested block, call console.group().
console.log("This is the first level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the first level");
The following code shows nested block-level console statements — useful when working with relational data.
Use the console skillfully to improve JavaScript debugging performance
The console.groupcollapsed () method is similar, but the new block is collapsed and you need to click the display button to read it.