@madpilot makes

Debugging JavaScript in Internet Explorer

As anyone who has ever received the dreaded Object doesn’t support this property or method error in IE can attest, debugging using everyone favourite browser is a right, royal pain in the heiny. Using Firebug in Firefox really has spoilt us as frontend developers (Hey, what am I talking? These ARE BASIC TOOLS that every other development platform has had since Ada Lovelace was in small britches, but I digress), so what is a cross-platform developer to do?

Little known fact outside of the .NET world: Visual Studio has a complete JavaScript debugger built in, which allows you to set breakpoints, add watches, mess around with variable values and more importantly, gives you better error messages, and actually highlights the line where things went wrong.

  1. Download and Install Visual Studio Express Edition (which is free as in beer).
  2. Create a new Web Site – call it what ever you like, it’s just a placeholder
  3. Hit “Run” (or F5) on the blank problem – a local server should start, and IE7 should load a blank page
  4. Change the URL to the page you want to debug. Once the page is loaded the debugger is good to go – in fact, if your page has any errors, Visual Studio will get focus, and politely tell you as such
  5. To add a break point, flick back to Visual Studio Express and open the JavaScript file you wish to add the break point to, and then refresh the browser – once context hits the point, you will be able to step through the code.

Whilst still lacking a DOM browser (Firebug Lite might be able to help out with that), this takes some of the fun out of debugging JavaScript IE, from the point of view that it is now actually possible.

7 comments

  1. I'm guessing that the Express SKU doesn't include an "Attach to Process" option on the Debug menu like its beefier cousions, Professional and Team System. If it did, you could attach to IE and avoid the whole creating a blank project step.
  2. Hi Will,



    I can't see it - there is no Debug menu unless a project is loaded. This is not to say you can't do that, but it just isn't immediately obvious to me how.
  3. Myles,



    Might help if I actually opened up VS, huh?



    How about Tools > Attach to Process (Ctrl + Alt + P)



    This may not be in the Express SKU, though.
  4. Will,



    Nope - it look slike one of the features that hit the cutting room floor.



    Mind you, I'm willing to load a fake project, rather than fork out for Visual Studio proper ;)
  5. Agreed. VS Pro is a great tool... if you have someone else paying for it (or you get it as schwag at a Microsoft event ;)
  6. also works with ie6, in case you are wondering :)
  7. great post, IE can be very annoying! I have also used http://www.debugging.me/javascript

Leave a comment