20+ console commands that will change the way you think about debugging

You probably already know the console.log method and a few others, but there are actually more than 20 kinds. Each of them is useful in its own way, and using them for their intended purpose, you will noticeably improve the quality of debugging.

Basic Console Methods

Let’s start with 5 main methods:

  1. log

  2. debug

  3. info

  4. warn

  5. error

All of the above methods work in the same way, outputting the specified information to the console. The only difference between them is how it is displayed in it. For comparison, let’s look at each method separately.

If you want to repeat the same thing, you may not see some of the methods. This is because the console has the ability to hide or show levels

The ability to select levels is one of the reasons why these methods can be so useful. If you need to display only errors in the console, choosing the appropriate level will greatly speed up debugging.

Examples of using

The simplest way to use these methods is to pass a string or other value to them. They will print this value to the console. You can go further and pass multiple values ​​as arguments

console.log("Hello", "World", { name: "Leslie" })
// Hello World {name: 'Leslie'}

This applies to all 5 main methods, and is a convenient way to display information on a single line instead of displaying each value separately using the same method multiple times.

Live display

The browser, helping us in debugging, always displays the actual values ​​in the object

const person = { name: "Leslie" }
console.log(person)
person.name = "Sally"

In the browser console, the actual value of the key name object person will be calculated at the moment when we reveal the object itself

Sometimes this is really useful, but more often than not, we want to know what the value was when it was printed to the console. An easy way to achieve the desired result is to clone the object

const person = { name: "Leslie" }
console.log({ ...person })
person.name = "Sally"

There is a nuisance here: the code described above does not work with objects that have any kind of nesting. In such a situation, you will either need to write your own method for deep cloning, or use the existing one:

const person = { name: "Leslie" }
console.log(JSON.parse(JSON.stringify(person)))
person.name = "Sally"

Improved data output

Now that we’ve finished with the basic methods, let’s take a look at the more advanced ones.

Dir

Method dir suspiciously similar to one of those that we analyzed earlier – the method logwith only one caveat: log outputs HTML elements in HTML format, while dir displays a list of their properties

console.log(document.body)
console.log(document.body)
console.dir(document.body)
console.dir(document.body)

table

Method table used to display objects in an array in the form of a table, visually simplifying their perception

Grouping

The output to the console is also modified by the following 3 interrelated methods:

group groupCollapsed groupEnd

The names of these methods speak for themselves. Both group and groupCollapsed form a group, but groupCollapsed creates it already closed. Messages printed to the console will be part of the group until it is terminated by the method groupEnd.

console.log("Вне группы")

console.group()
console.log("Внутри первой группы")
console.log("Все еще первая группа")
console.groupEnd()

console.group("Название второй группы")
console.log("Внутри второй группы")

console.groupCollapsed()
console.log("Внутри вложенной группы")
console.groupEnd()

console.log("Все еще вторая группа")
console.groupEnd()

In this example, we have created 3 different groups. The first group was not passed an argument, so it has the standard header “‎console.group”‎. In the second, we passed the string “Name of the second group” as an argument, nesting another group into it using the method groupCollapsed. As you might have guessed, there can be several more nested in a group. Notice the group created using groupCollapsed not disclosed.

The grouping methods are useful if you need to print a lot of related information to the console and you don’t want to fill the entire console with it.

Performance Debugging

Timer

The next few methods are easy to understand because their job is to calculate the time between the start and end of an operation. In our case, this is a function call

console.time()
slowFunction()
console.timeEnd()
// default: 887.69189453125 ms

console.time("Label")
slowFunction()
console.timeEnd("Label")
// Label: 863.14306640625 ms

Just like in a group, a title can be passed as an argument to the timer. In order to link the start and end of the same timer, the same header must be passed to the final method timeEnd.

In addition to these two methods, there is one more — timeLog. Using timeLogyou can display the current time since the start of the timer without stopping it.

console.time("Label")
slowFunctionOne()
console.timeLog("Label")
slowFunctionTwo()
console.timeEnd("Label")
// Label: 920.578125 ms
// Label: 1855.43896484375 ms

Don’t forget to pass the appropriate header to it, as in the example above.

Profiler

Now let’s look at how to take performance debugging to the next level using a profiler.

console.profile()
slowFunction()
console.profileEnd()

console.profile("Label")
slowFunction()
console.profileEnd("Label")

What it does: method profile launches the profiler of the same name built into the developer tools, recording various performance-related information.

Note: Depending on the browser, the profiler may look different and be located in different places. Also, the profiler is currently not standardized. This means that some browsers do not support it, and in those where it is, it may not work correctly. For this reason, I do not recommend its use.

Miscellaneous

The last few methods I’d like to talk about don’t fit into the previous categories, but they’re incredibly useful nonetheless.

assert

My favorite in this category is the method assert. Assert, unlike the main methods, takes as the first parameter boolean meaning. If this value is in the state truethe output of information to the console will be canceled, and vice versa

const n = 2
console.assert(n === 1, "Переменная n не равна одному")

The code below demonstrates the same logic of work.

const n = 2
if (n !== 1) console.error("Переменная n не равна одному")

clear

You won’t find an easier method. All it does is clear the console

console.clear()

count and countReset

count displays the number of calls to this function. It’s easy to guess that countReset clears the current account by starting it over

console.count()
console.count()
console.countReset()
console.count()
// default: 1
// default: 2
// default: 1

console.count("Label")
console.count("Label")
console.countReset("Label")
console.count("Label")
// Label: 1
// Label: 2
// Label: 1

trace

The last method we will look at is called trace. A simple method that displays information about which function called another function. It can also be useful when you need to track function calls inside other functions.

function firstFn() {
  function secondFn() {
    console.trace();
  }
  secondFn();
}

firstFn();

Conclusion

Could you imagine that there are so many web console methods? I myself was surprised by their number and variety.

I hope at least one of these methods will help you improve the quality of your debugging.

Similar Posts

Leave a Reply