Five debugging skills required for JS debugging

1. debugger;

As I have said before, you can add a sentence in JavaScript code.debugger;To manually create a breakpoint effect.
Do I need a breakpoint with a condition? You only need to useifStatement:

Copy codeThe Code is as follows: if (somethingHappens ){

Debugger;

}

But remember to delete them before the program is released.

2. Set to trigger the breakpoint when the DOM node changes

Sometimes you will find that DOM is not under your control, and you will encounter some strange changes, making it difficult to find the root cause of the problem.

The development tool of Google browser has a super easy-to-use function dedicated to dealing with this situation, called"Break on ..."Right-click the DOM node to view the menu item.

The breakpoint trigger condition can be set to the deleted node, the node attribute changes, or a change of its subnode.

3. Ajax breakpoint

XHR breakpoint, or Ajax breakpoint, just like their names, allows us to set a breakpoint to trigger them when characteristic Ajax calls occur.

This method is very effective when you are debugging the network transmission of Web applications.

4. Mobile Device Simulation Environment

Google Chrome has some very interesting tools to simulate mobile devices and help us debug how programs run on mobile devices.

The method to find it is: Press F12, call the developer tool, and then pressESCKey (the current tab cannot be the Console), and you will see the second-layer debugging window. The Emulation tab contains various simulation devices.

Of course, this won't become a real iPhone, just simulating the iPhone size, touch event and browser User Agent value.

5. Use Audits to improve your website

YSlow is a great tool. Google Chrome's developer tool also has a very similar tool calledAudits.

It can quickly audit your website and provide you with practical and effective suggestions and methods for optimizing your website.

Is there anything else?

Without these tools, I don't know how to develop them. I will also write more tips on this-once I find something, please follow my latest article.