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 use
First of all,
alertOnly strings can be printed, if the printed object is not
String, it will call the
toString()Method converts the object to a string (such as
[object Object]This), so unless you print
StringNo other information can be obtained for objects of type. Secondly,
alertMy classmates can change this habit.
2. Learn to use
console.logAnyone can use it, but many students only know the simplest
console.log(x)This prints an object when it is in your code
console.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);
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.
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:
console.logWhen printing an object of reference type (such as array and custom object), the output may not be executed
console.logThe value of the method at that point in time. For example:
You can find two
console.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 use
JSON.parse(JSON.stringify(...))To solve this problem:
3. Learn to use
We sometimes want to see what attributes and methods are in a DOM object, but it is common
console.logThe only thing printed is HTML tags, like this:
There is no difference from direct review elements.
4. Learn to use
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 them
console.logIt is very troublesome to expand each user object one by one when printing it out. And
console.tablePerfect solution to this problem, for example, I just want to get the id and coordinates of the following users:
Very accurate and fast!
5. Learn to use
console.timeMethods such as:
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. Use
debuggerKey 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 console
SourcesTo 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. .
Command + 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 in
SourcesRead 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!