Debugging JavaScript in Internet Explorer

03
Feb
Tags: javascript, software design process, asp.net
TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

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 Responses to “Debugging JavaScript in Internet Explorer”

  1. Will Green Says:
    February 3rd, 2009 at 9:13 am

    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. Myles Eftos Says:
    February 3rd, 2009 at 9:15 am

    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. Will Green Says:
    February 3rd, 2009 at 9:47 am

    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. Myles Eftos Says:
    February 3rd, 2009 at 9:50 am

    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. Will Green Says:
    February 3rd, 2009 at 9:57 am

    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. fin Says:
    March 13th, 2009 at 10:43 pm

    also works with ie6, in case you are wondering :)

  7. peter Says:
    October 4th, 2009 at 8:11 am

    great post, IE can be very annoying! I have also used http://www.debugging.me/javascript

Leave a Reply