Having seen too many students debug Javascript, it is only simpleconsole.logEven ..alert, looking at really catch chicken for them. . Because most students pursue elegant and efficient code writing, but ignore how to debug code gracefully and efficiently, they have to say it is a bit “partial”. Below I will share some practical and smart debugging skills, hoping to make everyone more confident when debugging their own code.

1. Do not usealert

First of all,alertOnly strings can be printed, if the printed object is notString, it will call thetoString()Method converts the object to a string (such as[object Object]This), so unless you printStringNo other information can be obtained for objects of type. Secondly,alertIt will block the execution of UI and javascript. You must click the’ OK’ button to continue, which is very inefficient. So, like to usealertMy classmates can change this habit.

2. Learn to useconsole.log

console.logAnyone can use it, but many students only know the simplestconsole.log(x)This prints an object when it is in your codeconsole.logAfter more, it will be difficult to match a certain printed result with the code, so we can add a label to the printed information for easy distinction:

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

Get:

The label does not have to have a clear meaning, but the visual effect is obvious, of course it is better to have a clear meaning.

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

If there is too much printed information and it is not easy to find the target information, it can be filtered in the console:

Attention

In useconsole.logWhen printing an object of reference type (such as array and custom object), the output may not be executedconsole.logThe value of the method at that point in time. For example:

You can find twoconsole.logThe output is expanded to[1, 2, 3, 4]Because the array is of a reference type, all you get after expansion is the latest state of the array. We can useJSON.parse(JSON.stringify(...))To solve this problem:

3. Learn to useconsole.dir

We sometimes want to see what attributes and methods are in a DOM object, but it is commonconsole.logThe only thing printed is HTML tags, like this:

There is no difference from direct review elements.

If we want to see DOM objects as JavaScript object structures, we can use themconsole.dirFor example:

In fact,console.dirYou can print the attribute list of any JavaScript object, such as printing a method:

4. Learn to useconsole.table

We often encounter such a scenario: we get a list of users, each user has many attributes, but we just want to view some of them and use themconsole.logIt is very troublesome to expand each user object one by one when printing it out. Andconsole.tablePerfect solution to this problem, for example, I just want to get the id and coordinates of the following users:

console.logPrint results:

console.tablePrint results:

Very accurate and fast!

5. Learn to useconsole.time

Sometimes we want to know the performance of a piece of code or how long an asynchronous method needs to run, which requires a timer. JavaScript provides it out of the boxconsole.timeMethods such as:

6. UsedebuggerBreak point

Sometimes we need to step through the break point, and we usually choose to directly break the point at the browser console, but this still needs to be done first.SourcesIt takes time to find the source code and then find the line of code that needs to be interrupted. UsedebuggerKey words, we can directly define breakpoints in the source code, which is much more convenient, such as:

7. Find the source code file

Sometimes we want to be in the consoleSourcesTo find a js source file, it is very troublesome to open the folder one by one. In fact, Chrome provides a file search function, but most of the time we ignore it. .

Just pressCommand + P(Please check the shortcut keys of windows) The search box will pop up to search for the file you are looking for:

8. Compress JS file reading

Sometimes we need to be inSourcesRead a js code in, but found it compressed. Chrome also provides a convenient formatting tool to make the code readable again:

This is what happens after the point is made:

These are some debugging tips that I usually use in my daily life. If you have other good debugging skills, please share them. Thank you!