5 essential debugging skills for JS debugging_javascript skills

1. debugger;

I have said before that you can add a debugger; to the JavaScript code to manually create a breakpoint effect.
Need conditional breakpoints? You just need to surround it with if statements:

Copy code The code is as follows:

if (somethingHappens) {

debugger;

}

But remember to delete them before publishing the program.

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

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

There is a super useful function in the development tools of Google Chrome, which is specially designed to deal with this situation. It is called “Break on…”. You can see this by right-clicking on the DOM node. menu item.

The triggering condition of the breakpoint can be set when the node is deleted, there is any change in the node's attributes, or there is a change in one of its child nodes.

3. Ajax breakpoint

XHR breakpoints, or Ajax breakpoints, as their name suggests, allow us to set a breakpoint that triggers specific Ajax calls when they occur.

This trick is very effective when you are debugging network transmission of web applications.

4. Mobile device simulation environment

There are some very interesting tools in Google Chrome that simulate mobile devices to help us debug the running of programs on mobile devices.

The way to find it is: press F12 to bring up the developer tools, then press the ESC key (the current tab cannot be Console), you will see the second layer of debugging window appear, inside the Emulation tab page A variety of analog devices are available.

Of course, this does not turn into a real iPhone, it just simulates the iPhone's size, touch events and browser User Agent values.

5. Use Audits to improve your website

YSlow is a great tool. Google Chrome’s developer tools also have a very similar tool called Audits.

It can quickly audit your website and give you very practical and effective suggestions and methods for optimizing your website.

Are there any others?

I don’t know how I would develop without these tools. I’ll be writing more tips on this as well – stay tuned for my latest post once I find out.