5 Debug tips required for JS debugging

1. Debugger;

The debugger statement is used to stop executing JavaScript and to invoke (if available) the Debug function.

Using the debugger statement is similar to setting breakpoints in code.

Typically, you can turn on the Debug tool by pressing F12 and select "Console" from the Debug menu.

After entering a breakpoint, you can double-click one of the following lines of code, set a new breakpoint, and then execute to the corresponding line

Do you need a breakpoint with a condition? You just need to if surround it with a statement:

Copy CodeThe code is as follows: if (Somethinghappens) {

Debugger

}

But remember to delete them before the program is released.

2. Set trigger breakpoint when DOM node is changed

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

Google Browser development tool has a super easy to use features, specifically to deal with this situation, called "Break on ...", you can right-click on the DOM node to see this menu item.

The trigger condition of a breakpoint can be set to the node being deleted, any change in the properties of the node, or a change in one of its child nodes.

3. Ajax Breakpoints

XHR breakpoints, or Ajax breakpoints, just like their names, lets us set a breakpoint that triggers when the feature's Ajax call occurs.

This is very effective when you are debugging a web app's network transfer.

4. Mobile Device Simulation Environment

Google Chrome has some very interesting tools for simulating mobile devices that help us debug the operation of the program on mobile devices.

The way to find it is: press F12, bring up the developer tool, then press the ESC key (the current tab cannot be the console), you will see the Second Debug window appears, the inside of the Emulation tab has a variety of analog devices are optional.

Of course, this doesn't turn into a real iphone, just simulates the size of the iphone, the touch event and the browser user agent value.

5. Use audits to improve your website

YSlow is a great tool. Google Browser developer Tools also have a very similar tool, called audits.

It can quickly audit your site and give you suggestions and ways to optimize your site in a very practical and effective way.

Is there anything else?

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

5 Debug tips required for JS debugging