1. debugger;
I have also said before that you can add a debugger; to the JavaScript code to manually create a breakpoint effect.
Need conditional breakpoints? You just need to surround it with if statements:
Copy the code. The code is as follows: if (somethingHappens) {
debugger;
}
But remember to delete them before the program is released.
2. Set a breakpoint to trigger when the DOM node changesSometimes you will find that the DOM is not under your control and will undergo some strange changes, making it difficult for you to find the source of the problem.
There is a super easy-to-use function in the development tools of Google Chrome that can specifically deal with this situation, called "Break on..." . You can see this menu item by right-clicking on the DOM node.
The triggering condition of the breakpoint can be set to the deletion of the node, any change in the node's attributes, or a change in one of its child nodes.
3. Ajax breakpointsXHR breakpoints, or Ajax breakpoints, as their name suggests, allow us to set a breakpoint that triggers specific Ajax calls when they occur.
This trick is very effective when you are debugging network traffic for web applications.
4. Mobile device simulation environmentGoogle Chrome has some very interesting tools for simulating mobile devices to help us debug how programs run on mobile devices.
The way to find it is: press F12 to bring up the developer tools, and then press the ESC key (the current tab cannot be Console), you will see the second layer of debugging window appear, and there are various simulation devices in the Emulation tab. Optional.
Of course, this doesn't turn into a real iPhone, it just simulates the iPhone's dimensions, touch events, and browser User Agent values.
5. Use Audits to improve your websiteYSlow is a great tool. Google Chrome's developer tools also have a very similar tool called Audits .
It can quickly audit your website and give you very practical and effective suggestions and methods for optimizing your website.
Are there any others?I don't know how I would develop without these tools. I'll be writing more tips on this as well - stay tuned for my latest post once I find out.