1. Debugger:
As I've said before, you can add a debugger to your JavaScript code and manually create a breakpoint effect.
Do you need a breakpoint with a condition? You just need to surround it with an if statement:
- if (Somethinghappens) {
- Debugger
- }
Copy Code
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, and then press ESC (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
It can quickly audit your site and give you suggestions and ways to optimize your site in a very practical and effective way.
Source: http://bbs.html5cn.org/thread-84749-1-1.html |
5 Debug tips required by JavaScript programmers