Having seen too many students debug Javascript, it is only simpleconsole.log
Even ..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,alert
Only 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 printString
No other information can be obtained for objects of type. Secondly,alert
It will block the execution of UI and javascript. You must click the’ OK’ button to continue, which is very inefficient. So, like to usealert
My classmates can change this habit.
2. Learn to useconsole.log
console.log
Anyone can use it, but many students only know the simplestconsole.log(x)
This prints an object when it is in your codeconsole.log
After 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.log
Can 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.log
When printing an object of reference type (such as array and custom object), the output may not be executedconsole.log
The value of the method at that point in time. For example:
You can find twoconsole.log
The 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.log
The 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.dir
For example:
In fact,console.dir
You 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.log
It is very troublesome to expand each user object one by one when printing it out. Andconsole.table
Perfect solution to this problem, for example, I just want to get the id and coordinates of the following users:
console.log
Print results:
console.table
Print 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.time
Methods such as:
6. Usedebugger
Break 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. Usedebugger
Key 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 consoleSources
To 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 inSources
Read 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!