5 essential debugging tips for JS debugging

1. The debugger;

As I said before, you can add a debugger to your JavaScript code; to manually create a breakpoint effect.
Do I need a conditional breakpoint? You just need to surround it with if :

if (somethingHappens) {
  debugger;
}

But remember to delete them before the program is published.

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

Sometimes you'll find that the DOM is out of your control and something strange will happen to you, making it difficult to pinpoint the root of the problem.

There's a great feature in the development tool for the Google browser that deals with this situation. It's called "Break on..." , you can see this menu item by right-clicking on the DOM node.

The trigger condition for a breakpoint can be set to allow the node to be deleted, any changes to the properties of the node, or any changes to one of its children.

(link: #)

3. Ajax breakpoints

XHR breakpoints, or Ajax breakpoints, as they are called, allow us to set a breakpoint that fires when a characteristic Ajax call occurs.

This is very effective when debugging a Web application's network traffic.

(link: #)

4. Mobile device simulation environment

There are some very interesting tools in the Google browser that simulate a mobile device and help you debug how it works on a mobile device.

To find it, press F12 to bring up the developer tool, then press ESC key (currently, the TAB cannot be a Console), and you will see a second layer of debugging window appear, the Emulation TAB inside the page to choose from a variety of simulation devices.

Of course, this doesn't turn into a real iPhone, just a simulation of iPhone size, touch events, and browser User Agent values.

(link: #)

5. Use Audits to improve your site

YSlow is a great tool. Google browser developer tools also have a very similar tool, called Audits.

It can quickly audit your website and give you very practical advice and methods to optimize your website.

(link: #)

Anything else?

Without these tools, I don't know how to develop. I'll be writing more about this technique - stay tuned for my latest article as soon as I find out.