Shulou(Shulou.com)06/03 Report--

Editor to share with you what debugging skills in Javascript, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Do not use alert

First of all, alert can only print strings, and if the printed object is not String, the toString () method will be called to convert the object into a string (such as [object Object]), so unless you print an object of type String, you won't get anything else. Second, alert will block the execution of UI and javascript, and you must click the 'OK' button to continue, which is very inefficient. Therefore, students who like to use alert can change this habit.

two。 Learn to use console.log

Anyone can use console.log, but many students only know that the simplest console.log (x) prints an object like this. When you have more console.log in your code, it will be difficult to match a print result with the code, so we can add a label to the print message to make it easier to distinguish:

Let x = 1position console.log ('aaaaaaaa', x)

Get:

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

In fact, console.log can take as many parameters as you want and finally splice the output of these objects, such as:

If you print too much information and it is not easy to find the target information, you can filter it in the console:

Pay attention

When using console.log to print an object of reference type (such as arrays and custom objects), the output may not be the value at the point in time when the console.log method is executed. For example:

You can find that the results of the two console.log outputs are both expanded to [1, 2, 3, 4]. Because the array is a reference type, you get the latest state of the array after expansion. We can use JSON.parse (JSON.stringify (...)). To solve this problem:

3. Learn to use console.dir

We sometimes want to see what properties and methods are in a DOM object, but regular console.log prints out just HTML tags, like this:

It's no different from directly reviewing elements.

If we want to see the structure of a DOM object as a JavaScript object, we can use console.dir, such as:

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

4. Learn to use console.table

We often encounter such a scenario: get a list of users, each user has a lot of attributes, but we only want to view some of them. When printing out with console.log, we need to expand each user object one by one, which is very troublesome. Console.table solves this problem perfectly. For example, I only want to get the id and coordinates of the following users:

Console.log print result:

Console.table print result:

Very accurate and fast!

5. Learn to use console.time

Sometimes we want to know the performance of a piece of code or how long an asynchronous method needs to run, and we need to use timers. JavaScript provides off-the-shelf console.time methods, such as:

6. Use debugger break points

Sometimes we need a breakpoint for single-step debugging, and we usually choose the breakpoint directly in the browser console, but we also need to find the source code in Sources first, and then find the line of code that needs the breakpoint, which is time-consuming. Using the debugger keyword, we can define breakpoints directly in the source code, which is much more convenient, such as:

7. Find the source file

Sometimes we want to find some js source file in the Sources of the console, and it is very troublesome to find the folder one by one. In fact, Chrome provides the search function of files, but most of the time we ignore it.

Just press Command + P (please check the shortcut key for windows) and the search box will pop up to search for the file you are looking for:

8. Reading of compressed JS files

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

After clicking, it looks like this:

These are all the contents of this article entitled "what are the debugging skills in Javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.