8 Practical JavaScript Debugging Skills

I have seen too many people debugging JavaScript code only with console.log or even alert simply. They pursue elegant and efficient code, but ignore debugging the code elegantly and efficiently. Today I will share some practical debugging techniques, and hope that they can help you to debug your js code more confidently.

1. Do not use alert

First, the alert method can only print out strings. If the printed object is not a String, the toString() method will be called to convert the object into a string (such as, convert the object into [object Object]). So no other information can be obtained unless you print the object in the String type. Second, the alert will block the UI thread, and only after you click the "OK" button will the JavaScript code continue to execute. So it is very inefficient. Therefore, you'd better change the habit of using the alert.

2. Learn to use console.log

Everyone knows how to use console.log, but many only know the simplest console.log(x) to print an object. It will be difficult to find the corresponding print result when there are more console.logs in your code. So we can add a tag to the print information for distinguishing:

let x = 1;
console.log('aaaaaaaa', x);

The result:

The tag doesn't need to be well defined, but the visual effect needs to be striking. Of course, it's better to give the tag a meaningful name.

In fact, console.log can receive any number of parameters, and splice and output these objects finally, such as:

If the printed information is too much and it's hard to find the target information, you can filter it in the console:

Note

When you print an object of a reference type (such as an array or a custom object) with console.log, the output result may not be the value when the console.log method was executed. For example:

It can be found that the output results of the two console.logs are both [1, 2, 3, 4]. As the array is of the reference type, you will get the latest state of the array when calling the console.log method. We can solve the problem with JSON.parse(JSON.stringify(...)):

3. Learn to use console.dir

Sometimes, we may want to see what properties and methods are there in a DOM object, but the console.log method only prints the HTML tags, like this:

If we want to get the structure of the DOM object, we can use console.dir, for example:

In fact, console.dir can print out the property list of any JavaScript object, such as printing the property list of a method:

4. Learn to use console.table

When we get a list of users, often there are multiple properties for each user. However, we often only want to view some of these properties, so we need to expand each user object when printing out with console.log. Well, console.table can solve the problem perfectly. For example, if I only want to get the id and coordinates of the following users,

the results printed with console.log are:

And the results printed with console.table are:

The latter is so accurate and fast!

5. Learn to use console.time

Sometimes we may want to know the performance of a piece of code or how long an asynchronous method needs to run, so we need to use the timer, and JavaScript provides the console.time method for us. For example:

6. Use debugger to break points

Sometimes we need to break points for single-step debugging, and generally we'll choose to break points directly in the browser console. However, if doing so, you need to go to the Sources panel to find the source code first, and then find the lines of code that needs to break points. We can define the breakpoints directly in the source code by using the debugger keyword. For example:

7. Lookup for the source file

Sometimes we may want to find a js source file in the Sources of the console, and It will be very troublesome to open the folders one by one. In fact, Chrome provides us a search function for files, but most of the time we ignore it.

Just press Command + P (please check the windows shortcuts yourself) to pop up the search box and lookup for the file you want to find:

8. Read the compressed JavaScript code

Sometimes we need to read a piece of js code in Sources, but find that it is compressed. Chrome provides a convenient formatting tool to make the code readable:

Then, it becomes:

These are some of the debugging tips that I use. Thanks for reading.