Monday, March 19, 2012

How to debug Javascript in IE7

Most developers know Firebug which is a nice debugging tool for Firefox. When it comes to IEs, Microsoft has a better debugging tool for it. It is called Visual Web Developer Express. Many people think it is only for .NET development. I will show you how to do Javascript debugging using Visual Web Developer Express.
  1. Install Visual Web Developer Express. It is free. http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-express
  2. Update some IE settings. Tools->Internet Options->Advanced. Uncheck "Disable script debugging". Check "Display a notification about every script error".
  3. Fire up Visual Web Developer Express and create a New Web Site.
  4. Run the new web site in debugging mode. (F5)
  5. At this point, IE is launched with the new web site in it.
  6. Type in the web page you want to debug into address bar.
  7. Switch back to Visual Web Developer Express and you should see all the Javascript files of the page are loaded under Solution Explorer.
  8. Double click on the Javascript file, set break points and start debugging. Use controls on the top to start, stop, step over, etc.