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

You do not know what the 16 JavaScript debugging skills are, for this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

JavaScript debugging is recognized as a difficult problem in the industry. But once you master the skills and understand the tool itself, you can save a lot of time.

Most of these techniques apply to Chrome and Firefox, and many can be used with other inspectors. In addition, if you want to find JavaScript errors faster, try Raygun Crash Reporting, which alerts you to the errors and provides a stack trace.

1. Debugger

After console.log, the debugger was my favorite quick debugging tool. If you place a debugger, in your line of code, Chrome will automatically stop there at execution time, and you can even wrap it in a conditional clause, so it only runs when needed.

two。 Display objects as tables

Sometimes you want to view a complex set of objects. You can console.log them and scroll through the list, or you can use the console.table helper. It makes it easier for you to see what you are working on!

Output:

3. Try all sizes

While it's great to have every mobile device on the table, it's not feasible in the real world. How do you resize viewports? Chrome provides you with everything you need. Jump to the inspector and click the Toggle device Mode button. Watch your media query come true!

4. How to quickly find your DOM element

Mark a DOM element in the elements panel and use it in the console. The Chrome browser inspector retains the last five elements in its history so that the last tagged element is displayed as $0, the penultimate tagged element is $1, and so on.

If you mark the following items in the order of "item-4", "item-3", "item-2", "item-1", "item-0", you can access such DOM nodes in the console:

5. Use console.time () and console.timeEnd () for the base cycle

It can be especially useful to know exactly how long it takes to perform an operation, especially when debugging slow loops. You can even set multiple timers by assigning tags to the method. Let's see how it works:

Output:

6. Get the stack trace of a function

You probably know that the JavaScript framework can generate a lot of code quickly.

You will have many views and trigger many events, so eventually you will encounter a situation where you want to know what caused a particular function call. Because JavaScript is not a structured language, it can sometimes be difficult to keep track of what happened and when.

This is when you can debug JavaScript when console.trace (or just a trace in the console) comes in handy. Imagine that you want to see the entire stack trace of the function call funcZ in the car instance:

Output:

Now we can see that func1 is called func2 and it is called func4. Func4 then creates an instance of Car, then calls the function car.funcX, and so on. Even if you think you know a lot about scripts, this is still very convenient. Suppose you want to improve the code. Get a detailed list of tracking and all related features. Each can be clicked, and now you can switch back and forth between them. Just like a menu only suits you.

7. Minimizing code is an easy way to debug JavaScript

Sometimes you may encounter problems in production, and the source mapping does not fully reach the server. Don't be afraid. Chrome can shrink your Javascript files to a format that is easier to read. This code won't be as useful as your actual code-but at least you can see what's going on. Click the {} beautiful print button below the source viewer in the inspector.

8. Quickly find the features to debug

For example, you want to set a breakpoint in function.The. The two most common ways to do this are:

1. Find you to check the line and add a breakpoint

two。 Add a debugger to a script

In both solutions, you must manually browse the file to isolate the specific lines to debug. Perhaps less common is the use of the console. Using debug (funcName) in the console, the script stops when it reaches the functionality you passed.

It is fast, but the disadvantage is that it does not apply to private or anonymous functions. Otherwise, this may be the fastest way to find the function you want to debug. (note: although the names are similar, a function named console.debug is not the same thing.)

Type debug (car.funcY) in the console, and when the script gets a function call to car.funcY, the script stops in debug mode:

9. Unrelated black box scripts

Today, we often have libraries and frameworks on our Web applications. Most of them are well tested and relatively error-free.

However, the debugger still enters all files that are not related to this debugging task. The solution is to black boxes the scripts that do not need to be debugged. This may also include your own scripts. Read more about debugging black boxes in this article.

10. Find the important content in complex debugging

In more complex debugging, sometimes we want to output many lines. One thing you can do to keep the output better structured is to use more console features, such as console.log,console.debug,console.warn,console.info,console.error, and so on.

You can then filter them in the inspector. Sometimes, when you need to debug JavaScript, this is not what you really want. If you like, you can be creative and style the information. To debug JavaScript, use CSS and make your own structured console messages:

Output:

In console.log (), you can set% s as a string,% I as an integer, and% c as a custom style. You may find better ways to use these styles. If you use a single page frame, you may need one style for viewing messages and another style for models, collections, controllers, and so on.

11. Observe specific function calls and parameters

In the Chrome console, you can focus on specific features. Each time the function is called, it is recorded with the passed-in value.

Output:

This is a good way to see which parameters are passed to the function. Ideally, the console can tell you how many parameters you expect, but not. In the above example, func1 requires three parameters, but only two parameters are passed in. If this is not handled in the code, it may result in an error.

twelve。 Quick access to elements in the console

A faster way to execute querySelector in the console is to use the dollar sign. $('css-selector') returns the first match of the CSS selector. All $('css-selector') will be returned. If you use an element multiple times, it is worth saving it as a variable.

13.Postman is great (but Firefox is faster)

Many developers are using Postman to process Ajax requests. Postman is great, but it can be annoying to open a new browser window, write a new request object, and then test it.

Sometimes it's easier to use a browser. When you do this, if you want to send to the password security page, you no longer need to worry about authentication cookie.

This is how you edit and resend requests in Firefox. Open the inspector and go to the Network tab. Right-click the desired request and select Edit and resend.

Now you can change anything you want. Change the title and edit the parameters, and then click resend.

Next, I make a request with different attributes twice:

14. Interrupt node change

DOM might be interesting. Sometimes things change, and you don't know why. However, when you need to debug JavaScript, Chrome allows you to pause when the DOM element changes.

You can even monitor its properties. In Chrome Inspector, right-click the element and select the setting break you want to use:

15. Use the page speed service

There are many services and tools available to audit the JavaScript of a page and to help you find slowdowns or problems. One of these tools is Raygun Real User Monitoring.

In addition to finding JavaScript problems, this can be useful for other reasons-slow loading of external scripts, unnecessary CSS, and an oversized image. It can help you understand JavaScript problems that cause unexpected loads to take too long or fail to execute correctly.

You can also measure improvements in JavaScript performance and track them over time.

16. There are breakpoints everywhere.

Finally, a real and tried-and-tested breakpoint can succeed. Try to use breakpoints in different ways for different situations.

You can click an element and set a breakpoint to stop execution when you modify an element. You can also go to the Debugger tab or the Source tab in the developer tool (depending on the browser) and set a XHR breakpoint for any particular source to stop on the Ajax request.

In the same location, you can also have it pause code execution when an exception occurs. You can use these various types of breakpoints in browser tools to maximize errors without having to spend time on external toolsets.

The answers to the 16 JavaScript debugging skills you don't know are shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.