5 Debug tips required by JavaScript programmers

1. Debugger;

You can add a sentence to the JavaScript code debugger; to manually create a breakpoint effect.

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

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.

5 Debug tips required by JavaScript programmers