Debugging Javascript has always been a pain in the neck. The only way to debug Javascript was to use alert boxes everywhere anticipating an error. Or rather let’s put it in this way… it’s just a binary search for an error…!
With new IDEs and plugins coming up it has become very easy. In this article let’s see some the best and easiest methods to debug Javascript.
Debugging Javascript with Visual Studio 2008
With Visual Studio 2008, Microsoft made debugging Javascript very similar to debugging your C# (or VB) code. Here is the process to debug Javascript in VS 2008.
- Open IE (I tried with IE 6), go to Tools>Internet Options>Advanced
- Uncheck “Disable Script Debugging (Internet Explorer)” and “Disable Script Debugging (Other)”.
- Open up your page/site which has to be debugged in IE.
- Go to View>Script Debugger>Open
- Select Either New Instance of visual Studio 2008 or an existing instance (Optionally you can select Microsoft Script Editor) and say “Yes”
- Now Code opens up in VS 2008; set breakpoints on Javascript code as you would do for your C# code.
- Refresh the page in IE. As soon as the control moves to your breakpoint for Javascript, it breaks to that line.
Now you can debug it as you do for C# code. Best part is you can also verify the local variables with Locals window (Debug>Windows>Locals in VS 2008)
Check ScottGu’s Blog for more
Debugging Javascript with Firefox
I firmly believe that Firefox is a boon for a web developer. It has loads of Ad-ons which make the life of a developer to be as easy as possible. There are many debuggers available for Firefox; of which I found Firebug to be really effective.
Download firebug here.
Once you have firebug up and running, open up the page you want to debug. Click on the firbug icon on the status bar and select the “Script” tab. Initially you will have to enable script debugging so select “Script” check box and click on “Apply Settings for localhost”.
Now you will be able to see the cod in the Script tab with line numbers. All the lines with valid Javascript will have the line number in bold face and green color. Click on the gray area just behind the line number and that is your break point.
Now you are all set for the debugging session…! So start…!
You can see local variables in the right pane. You can also check the call stack on the right pane by selecting the “Stack” tab.
You can use following keyboard shortcuts for debugging:
F8 – Continue
F11 – Step Into
F10 – Step Over
This is the source article which helped me to debug javascript with firebug.
