How to debug JavaScript in Internet Explorer

I’m preparing another (hopefully) useful full length article, but in the mean time I want to share with you a trick for getting a world-class debugger for free in IE.

JavaScript debugging in Visual Web Developer Express

Some background: users of Visual Studio have long known that it comes with an awesome debugger, probably the best JavaScript debugger there is (though Firebug is catching up fast). Whenever you get a JavaScript error, Visual Studio can connect to the Internet Explorer process and start debugging. You can pause the execution of the code, rewind and fast-forward execution, modify data held in variables and get notified when specific variables change in value. Once you’re used to it, coding without a debugger makes you feel like a blind man in a dark room looking for a black cat that isn’t there*.

The only problem is that it costs upwards of £500. Microsoft have released an excellent free edition of Visual Studio for web development called Visual Studio Express, but among the features reserved for the professional edition is the ability to connect to a process. Hence when you get a JavaScript error in a web page, VSE won’t appear in the list of possible debuggers.

The work-around is to get VSE to launch IE for you, so that it owns the process and doesn’t have to explicitly connect to it.

This article was originally written for an older version of Visual Studio Express called Visual Web Developer Express. The instructions should still work, let me know if you have any issues with them.

Step 1

Internet Explorer Options

First enable debugging in IE: go to Tools > Internet Options > Advanced, and make sure “Disable Script Debugging (Internet Explorer)” is unchecked and “Display a notification about every script error” is checked.

Step 2

Then Download and install VSE

Step 3

Creating a new empty website in VWD express

Create a new empty website

Step 4

Click the “Start Debugging” button. You will be prompted to enable debugging for this website – do so. VSE will then launch IE in debugging mode.Since your website is empty you will see a 404; ignore it and navigate to the actual page or website you want to debug.

Debugging tips

Any script errors will cause IE to pause execution and transfer control to VSE. The screenshot to the left shows me changing the value of a variable as the script is paused.

If any Firefox users have problems getting VSE to launch IE, see James Wiltshire’s comment below.

A few debugging tips:

  • Learn these shortcuts: Step Over (F10) executes the current line of code and moves to the next one. If the current line of code contains a function call, Step Into (F11) moves the debugger into that function call. Step Out (Shift+F11) executes the rest of the current function and pauses again after it returns. Continue (F5) resumes the script until the next error or breakpoint.
  • Debugging is easier if you write code with one function call per line, so that the debugger knows which function you want to step in to.
  • You can type any expression in the Watch window, and when its value changes it will turn red.
  • If you want to open the debugger when there is no error, click in the left-hand margin to set a break point or place the ‘debugger’ keyword in your code (this works in Firebug too).
  • The Script Explorer window is an extremely useful list of open JavaScript and HTML files that you can use to find code in order to set a breakpoint. It is not shown by default but you can enable it in Debug > Windows > Script Explorer.
  • A tip from Fraser in the comments below: If you like, you can create a home page for the new site, and add this code to the head section: <meta http-equiv=”refresh” content=”0;url=http://yoursite.com”>. This will redirect you automatically to your chosen site.

Happy coding!

* joke stolen from Rowan Atkinson

147 Responses to How to debug JavaScript in Internet Explorer

  1. Zev Spitz says:

    I’ve just come across this excellent article.

    However, I can’t seem to get the JIT window to pop up.

    I can attach MSE to a process, and it will then respond to a debugger statement.

    Within IE8, View -> External Script Debugger -> Open, hangs IE for a minute, and then IE continues normally.

    MSE is sufficient for my needs, and VWD is a much heavier application, so I don’t think I’ll be installing it just for this.

    I am running XP Home, and Office XP.

    I’ve seen somewhere that certain permissions need to be changed to allow script debugging. Do you know anything about that?

    Any suggestions?

  2. bernie says:

    The problem might be that in order to use VWD Express with IE, you have to start the IE process with VWD – you can’t attach VWD to an instance of IE that is already running.

    I recommend that you try this – it really is a much better debugging experience than MSE.

  3. Ken Dakin says:

    As the author of several commercially successful test/debugging systems (for mainframe computers produced 30-40 years ago) it is astonishing that, even today, some programmers still do not have the use of a good debugging system.

    Here is a quotation of mine I just made up “Trying to debug a program without a debugger is like trying to find out what’s wrong with a car engine by guesswork, and not even lifting the bonnet. There may even be a half-dead cat stuck in the inlet manifold but we might never know”

  4. Peter Peng says:

    Nice article.

    The way you mentioned is working very well in my place.

    It’s a fantastic way to connect VWD with IE.

    As I found,there is another way might be better compared with your way of redirecting page,which is “”start option”, fill the “start url” with the page I want to go.

  5. Hiya im new here. I found this board very useful & its helped me out a lot. i should be able to give something back & help others like it has helped me.

    I do like watch family guy this helps burn a lot of time.

    Thx’s, See ya about.

  6. Just wanted to say thanks, it worked nicely and helped me out today. So: Thanks! :)

  7. Pingback: Debugging javascript in ie7 « Johan Rylander

  8. at says:

    You saved my day. Thanks a lot!

  9. Hey, i’m here just to thanks too. Just to colaborate, I try with the newest version 2010 of Visual Web Developer Express and works fine!

    Thanks again. Cheers!

  10. manish says:

    Hi,
    Pros:
    1. Usable with any version of IE. Debugging in IE7 is challenge.
    2. IE 8 debuggers, loaded script navigation is pain, if you have may frames and many JSs.

    Issues:
    1. Hot code replacement is not there.
    2. View breakpoint list is absent
    3. Intellisence is not enough.
    4. Heavy. Anyone tried to reduce unwanted ‘dll’ loaded by the application. I did commented out some of the assembly definitions.

    If any one has solutions to issues, will be grateful

    Thanks
    Manish

    • bernie says:

      As far as I know, no browsers implement hot code replacement. In fact, the technique is pretty much only suitable for compiled languages with a first class notion of classes or methods. In JS, the program structure is built up flexibly using side effects. By this I mean that you don’t define a class – instead you write code that builds a data structure that behaves a lot like a class. Individual functions have no global name, so it would be really hard to swap them.

      I’m using GWT now, it has hot code replacement. Eclipse is hardly lightweight though :o)

      • manish says:

        By hot code replace means during debug session if I want to edit the js code ahead of breakpoint it doesn’t allow. I have to reload IE to reflect changes.

        I mean if IE is started through this application then js files in cache could be editable. Once things are ok, I can copy the final one to my original source.

        I don’t know if I can make them editable somehow.

        thanks
        Manish

  11. manish says:

    Has anyone tried “edit and continue” feature while debugging javascript? It seems to be enabled but it doesn’t let editing. The website path I have given the actual path of the server. It maps breakpoints but it doesn’t do edit and continue.

    Let me know if anyone finds a way out.

    Thanks
    Manish

  12. LOVE_MOSS_NOT says:

    Thanks for the article, but IE is a POS!

  13. Pablo says:

    Thanks for the article,
    btw. the joke is much older, the original was a thought on mathematicians made by Charles Darwin.

  14. rathervague says:

    Great bit of advice, helped a lot. Though it took 3 hours to download/setup and 5 minutes of bug fixing, job done!

  15. Jorge says:

    Tried this in Visual Web Developer 2010 Express, but couldn’t get it to attach to any of the Utilu IE Versions. Followed the instructions here, plus added IE 7 and 8 to the “Browse With…” dialog box and set them as default. VWD launches IE 7/8, but it doesn’t attach. Has anyone been able to attach to IE7 and then IE8 on the same machine?

  16. Franky says:

    Debugging Javascript in _any_ IE is such a huge pain in the a**! I just want to know what exactly happens at “line x/y” – please – IE – just give me a code-snippet, be specific about the javascript error you’r complaining! Arrrg!

  17. Clay Nichols says:

    Thanks!
    Works for me with MS VWD 2010 and IE 8.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>