This article mainly introduces five commonly used JavaScript debugging techniques. For more information, see printf debugging, since then, it seems that I have been using this method to solve bugs faster.
In some cases, better tools are needed. Below are some of the best of them. I am sure you will find them useful:
1. debugger;
You can use the "debugger;" statement to add a force breakpoint to the code.
Do I need a breakpoint condition? Just wrap it in the IF clause:
The Code is as follows:
If (somethingHappens ){
Debugger;
}
Remember to remove it before going online.
2. Disconnected When the node changes
Sometimes DOM has its own ideas. It is difficult to find the root cause of the problem when an incredible change occurs.
Chrome developers have extremely useful skills to debug this issue. This is the so-called "Break on ...", You can right-click the DOM node on the element tab to find it.
The breakpoint can be set after the node is deleted. When the node attribute is changed or the node in its subtree changes.
3. Ajax breakpoint
XHR breakpoints, or Ajax breakpoints I call, can also be broken when an expected Ajax request is created.
This is an amazing tool for debugging the network of your web application.
4. simulate different mobile devices
Chrome has a built-in mobile device simulation tool that simplifies your daily work.
Select any non-Console tab to find them, press the esc key on the disk, and select the mobile device you want to touch.
Of course you won't get a real iPhone, but the size, touch events, and agemts will follow suit for you.
5. Upgrade your site through review
YSlow is a great tool. Chrome also contains a similar tool called Audits under the developer tool.
Use Quick review to get useful optimization tips.
What else?
Without these tools, I cannot imagine how to develop them. When I find new ones, I will release more, so stay tuned.