How to troubleshoot JavaScript

Being able to properly identify a bug, and determine where it is in the code, is a definite skill when it comes to writing ANY code. But JavaScript does not have the same legacy as languages like C/C++, Perl, PHP, etc. We are highly dependent on what the browser can tell us, or an external script debugger. So debugging JavaScript is a little different than these languages.

What follows are recommendations. All web developers follow these to some degree or another, but these tips will help track down any JavaScript code issues quickly.

• Use FireFox. FireFox (or any of the Mozilla based browsers) offer the JavaScript console. Type "javascript:" into your address bar (without quotes), and you'll open up the console. Here you will see an accurate description of the error(s) and the line number and file name of the suspect code.

  Internet Explorer is notorious for giving misleading messages and/or pointing to the wrong line or file. Troubleshooting JavaScript in Internet Explorer requires the installation of third party script debuggers at best, or manual debugging (described below) at worst.

  Even if you are coding for an Internet Explorer only application, working in FireFox will help troubleshoot your JavaScript MUCH quicker than working in IE alone. Of course frequent testing of the code in IE is a must as well - there ARE some differences in how IE and Firefox will interpret the code.

• Use Firebug. Firebug is an add-on for FireFox that provides a number of features that are incredibly useful to a web developer. This includes a JavaScript Console which can also show the details of Ajax requests, a JavaScript debugger with step-through capabilities, a CSS inspector, a DOM inspector, and a profiling tool.

  Go to the Firebug website. Click the "Install Firebug" button (middle right area). Restart FireFox when you are done. Now activate Firebug by clicking the checkmark in the circle, in the very bottom right hand corner of the browser window. Take the time to explore what Firebug offers. Coding JavaScript without Firebug is almost like riding a bicycle that is missing a wheel. It can be done, but having two wheels makes it SO much easier.

• Use JSLint. JSLint is a web based verifier for JavaScript code. It will highlight problem areas and help identify subtle errors. JSLint offers a very strict interpretation of JavaScript (i.e. it'll recommend doing "x === 0" rather than "x == 0"), so some background knowledge is useful in understanding what messages are important. However following everything JSLint tells you usually won't lead you astray.

  Some developers find this tool especially helpful in determining why code will work in Firefox, but not in Internet Explorer.