I've used printf debugging before, and since then I've always seemed to fix the bug faster with this method.
In some cases, better tools are needed, here are some of the best of them, and I'm sure you'll find them useful:
1. debugger;
You can use the "debugger;" statement to add forced breakpoints to your code.
Do breakpoint conditions need? Just wrap it in the IF clause:
The code copy is as follows:
if (somethingHappens) {
debugger;
}
Just remember to remove it before going online.
2. Disconnect when the node changes
Sometimes DOM seems to have its own ideas. It is difficult to find the root cause of the problem when incredible changes occur.
Chrome developers have super useful skills to debug this problem. This is called "Break on...", which you can find by right-clicking the DOM node on the Elements tab.
Breakpoints can be set after a node is deleted, when the node's properties change or nodes in its subtree change.
3. Ajax breakpoint
XHR breakpoints, or what I call Ajax breakpoints, also allow disconnection when an expected Ajax request is created.
This is a surprising tool when debugging your web application's network.
4. Simulate different mobile devices
Chrome adds built-in mobile device simulation tools, which will simplify your daily routine.
Select any non-Console tabs to find them, press the esc key on the keyboard and select the mobile device you want to touch.
You certainly won't get a real iPhone, but the size, touch events and agemt will follow for you.
5. Improve your site through audit
YSlow is a great tool. Chrome also includes a similar tool called Audits under Developer Tools.
Use a quick review of your website to get useful practical optimization tips.
What else?
Without these tools I can't imagine how to develop. I will post more when I find new ones, so stay tuned.