I used to use printf debugging, and since then I seem to have been able to solve bugs faster.
In some cases a better tool is needed, and here are some of the best, and I'm sure you'll find something useful about them:
1. Debugger;
You can use "debugger;" Statement to add a forced breakpoint in your code.
Do I need a breakpoint condition? Simply wrap it in the IF clause:
Copy Code code as follows:
if (Somethinghappens) {
Debugger
}
Just remember to remove it before it goes online.
2. Disconnect when node changes
Sometimes Dom seems to have its own ideas. It's hard to find the root of the problem when the incredible changes happen.
The chrome developer has super useful skills to debug this problem. This is called "Break on ..." and you can find it by right-clicking the DOM node on the Element tab.
Breakpoints can be set when a node is deleted, or when a node's properties change or a node in its subtree changes.
3. Ajax Breakpoints
XHR breakpoints or what I call Ajax breakpoints also allow you to disconnect 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 emulation tools that will simplify your day-to-day work.
Select any non-console tab to locate them, press the ESC key on your keyboard and select the mobile device you want to touch.
You certainly won't get a real iphone, but size, touch events and AGEMT will follow.
5. Upgrade your site through audits
YSlow is a great tool. Chrome also includes a similar tool, called audits, under developer tools.
Use a quick review of your site to get useful practical optimization techniques.
What else is there?
Without these tools I can't imagine how to develop. When I find the new I will post more, please look forward to.