Debugging JavaScript in Internet Explorer
Typically debugging any issue in Internet Explorer can be a painful experience, JavaScript being one of the worst with unhelpful vague error messages - giving you no idea what the real error is, or where to find it. Here are a few things which make finding issues easier.
Have the correct settings to expose potential errors; Internet Explorer will have things such as script debugging disabled by default. From the "Tools" menu open “Internet Options”, click on the "Advanced" tab, under the "Browsing" heading:
- Disable script debugging (Internet Explorer): Unchecked
- Disable script debugging (Other): Unchecked
- Display a notification about every script error: Checked
- Show friendly HTTP error messages: Unchecked
Web Development Helper:
This toolbar is packed with good features, key of which are the Script Console, HTTP logging, providing a script console and ASP.NET debugging. The focus for us is the Script Console which can provide better error messages along with a debug trace in IE - so you can see the call stack or path of function calls which lead to the error. Also useful is a direct window you can enter Javascript into to be executed on the page.
http://projects.nikhilk.net/WebDevHelper/
Microsoft Visual Web Developer:
This free version of Visual Studio provides heavyweight debugging allowing for code pausing, rewind & fast-forward and modification of data current being used in variables. The following post gives an excellent installation and use guide, the free version of Visual Web Developer is missing a key feature which lets the debugger jump in on an error process occurring, so in order to be able to use this as a debugger you’ll need to launch Internet Explorer from within Visual Web Developer.
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-v...
http://www.microsoft.com/express/Web/
Script Debugger:
Lightweight and free, this will identify whereabouts in the code an error is occurring.
http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4...
General Tips:
Internet Explorer 6 and 7 cannot handle trailing commas when declaring an array, for example this will cause a debug error:
To fix, simply remove the comma after beta
Have JSLint check your code:
This great online tool let’s you paste your Javascript code into it, and then searches out any errors including things that will specifically trip up IE.
http://www.jslint.com/