You may be able to get away without debugger with Java, but not javascript. As a dynamic web scripting language, javascript creates amazing visual effects on a web page; at the same time it is easy to come up with unexpected results which makes you scratch your head and ask “how did this happen?”. It is very hard to find out the problem by just looking at the code because the values are changing in various ways that you overlooked. By saying that, knowing how to debug javascript is crucial for everyone wants to program with javascript. First of all, I want to thank the wonderful debuggers which come with the browser.
Debugging in Firefox
If a defect is found in Firefox, it is the best case it can be since you can use the most famous and powerful debugger called Firebug. With Firebug, you are able to trace down the problematic code with the least amount of time. The second icon shown on the top menu is the element selector so you can hover the element and look at the dom.
Debugging in Chrome
Chrome seems to have better performance than Firefox and it has a similar debugger – Developer Tools. There are more advanced features come with Developer Tools while there are many extensions available for Firebug. For basic debugging features, it is more of a personal preference to use Firebug or Developer Tools.
IE
IE is very unforgiving for any tiny programming mistakes. Sadly, the debugger in IE, which happened to be called as Developer Tools also, is not as powerful as the other two but still better than without it. The best thing of it is there is a clear cache button and the worst thing is it doesn’t show most of the related javascript files. One thing you should be aware of is that even thought IE 9 provides options for previous version modes, it’s not accurate so use the real version of IE to do the testing.
Although the functionality and design for different debuggers vary, they all try to provide those basic debugging features, like console, style, and network. The first thing you should check when you start the debugging process is to check if there are some major errors shown on the console cause it may interrupt the rendering of javascript. Also check the Net/Network tab of the debugger to see if all the required files are loaded correctly in case you missed the path of the file. If there are REST calls, check the request and response for the calls in the console tab.
The most common way to debug is to use console.log and set the break points in javascript files. Console.log comes in handy but you have to define all the variables that you are interested in. Setting break points are likely to be used so you can do further investigation. Also, you can add the variables to watch list and trace down the code with the stack when you set the break points. If you need to change the styling of the web page, it’s much better to do it in debugger so you can see the result instantly. Pro JavaScript Techniques by John Resig is a reference for the usage of different debuggers.
In the end, programming is such an interesting thing that makes your patience shines as it involves thinking processes in every phase of software development from design to testing. Debugging is just a process of correcting incorrect outcome discovered in certain circumstances. It takes time to trace down the code and find out the root cause of the defect. Depends on your experience and time with the code base, you may get an idea about what you should look into first. It is why programmers have higher job satisfaction than in other fields. You just feel good during the process of making better software.


