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

Old drivers commonly used several JavaScript debugging skills, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

We usually use the console of Chrome and Firefox as debugging tools for debugging Javascript. This article lists several techniques for debugging Javascript and mastering them, so that we can spend less time solving errors and bug, so as to improve development efficiency.

1. Debugger

Besides console.log, debugger is our favorite and fast debugging tool. After the code is executed, Chrome automatically stops when it is executed. You can even encapsulate it as a condition and run it only when needed.

If (thisThing) {debugger;}

two。 Display objects in a table

Sometimes, there is a complex set of objects to view. You can view and scroll through console.log, or expand using console.table to make it easier to see what you're working on!

Var animals = [{animal: 'Horse', name:' Henry', age: 43}, {animal: 'Dog', name:' Fred', age: 13}, {animal: 'Cat', name:' Frodo', age: 18}]; console.table (animals)

3. Use different screen sizes

It's great to install different mobile device simulators on the desktop, but it's not feasible. How to resize the window? Chrome provides everything you need. Jump to the console and click the 'switch device mode' button. Just observe the changes in the window!

4. Use console.time () and console.timeEnd () to test the loop

It is useful to know the execution time of some code, especially when debugging slow loops. You can even set multiple timers by passing different parameters to the method. Let's see how it works:

Console.time ('Timer1'); var items = []; for (var I = 0; I

The run produces the following results:

5. Format the code before debugging JavaScript

There is a time code that can cause problems in the production environment, but your source maps is not deployed in the production environment. Don't be afraid. Chrome can format your JavaScript files. The formatted code is not as useful as the real code, but at least you can see what happened. Just click the {} button in the source code viewer in the Chrome console.

6. Observe the calls and parameters of a specific function

In the Chrome console, you can observe specific functions. Each time the function is called, the passed-in parameters are printed.

Var func1 = function (x, y, z) {/ /....}

Output:

This is a good way to look at the parameters passed in to the function. However, it would be better if the console prompted us for the number of parameters. In the above example, func1 expects three parameters, but only two parameters are passed in. If you don't handle this parameter in your code, you're likely to make an error.

7. Quick access to elements in the console

A faster way than querySelector in the console is to use the dollar sign, and $('css-selector') returns the first match of the CSS selector. $('css-selector') will return all matches. If you use an element multiple times, you can save it as a variable.

8. Postman is great (but Firefox is faster)

Many developers use Postman to view ajax requests. Postman is really good. But it's troublesome to open a new window, write to the request objects, and then test them.

Sometimes it's easier to use a browser.

When you use a browser to view, if you request a password authentication page, you don't need to worry about the authentication cookie. Let's see how to edit and resend the request in Firefox.

Open the console and switch to the network tab. Right-click the desired request, then select Edit and resend. Now you can change whatever you want. Change the title and edit the parameters, and then click resend.

Here are two requests I made with different attributes:

9. Interrupt node change

DOM is an interesting thing. Sometimes it changes, and you don't know why. However, when you debug JavaScript, Chrome can be paused when the DOM element changes. You can even monitor its properties. In the Chrome console, right-click the element and select interrupt in Settings:

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.