Original: 5 Javascript Debugging Tips you ' ll start using today
I've used printf debugging before, and since then I've always seemed to be able to fix bugs faster.
In some cases you need better tools, and here are some of the best, and I'm sure you'll find them useful:
1. Debugger;
As I mentioned before, you can use "debugger;" Statement to add a mandatory breakpoint in your code.
Do you need a breakpoint condition? Just wrap it in the IF clause:
- If (somethinghappens) {
- debugger;
- }
Just remember to remove it before you go online.
2. Disconnect when the node changes
Sometimes the DOM seems to have its own ideas. It is difficult to find the root cause of the problem when the magical changes occur.
Chrome developers have the super-useful skills to debug this issue. This is called "Break on ..." and you can find it by right-clicking the DOM node on the Elements tab.
Breakpoints can be set after a node is deleted, when a node's properties change or when a node in its subtree changes.
3. Ajax Breakpoints
XHR breakpoints, or Ajax breakpoints I call, also allow for an expected AJAX request to be broken when it is created.
This is a surprising tool when debugging your Web app's network.
4. Simulate different mobile devices
Chrome adds a built-in mobile device simulation tool that will simplify your daily routine.
Select any non-console tab to find them, press ESC on your keyboard and select the mobile device you want to touch.
Of course you 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 the 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 and please look forward to it.
You should start with 5 JavaScript debugging tips today