« Today Creative Commons Salon, Tomorrow Mush
Ajaxio proof of concept for Ajax Visio functionality »
h1

Free Tools for Debugging Javascript (and Ajax apps) with Internet Explorer

May 26th, 2006

I have seen a lot of griping over the years about an imagined scarcity of debugging tools for IE. I find it remarkable that people in the business don’t know what’s available.

Microsoft has had great debugging tools for IE since Visual Interdev as far back as 1998 or so and continuing through to Visual Studio. The visual studio debugger has breakpoints, watch variables, call stack, step in/out/over, object browsing, immediate window, debug output window, and more.

If you didn’t want or need an entire IDE, Microsoft Script Debugger became available as a download for NT4 and Win98/ME, later becoming a component delivered with Windows operating systems as of Windows 2000 that simply required enabling. The Script Debugger is a lot lighter than the VS debugger, but still has breakpoints, watch variables, call stack, step in/out/over, immediate window, and debug output window.

Now Microsoft has released their Visual Web Developer Express IDE for free. Install it, then in your browser’s advanced options, uncheck the two boxes that disable debugging, and you have a debugger that is every bit as powerful as Mozilla’s Venkman ever was.

Here is a screenshot of a simple single-page debug session (click to open full size):

Visual Web Developer Debug Session

No wonder it took so long for Javascript to get any respect if people didn’t know that there were decent tools for it.

15 comments to “Free Tools for Debugging Javascript (and Ajax apps) with Internet Explorer”

  1. Jonathan Aquino left this comment but my spam filter chewed it up it, so I’m adding it myself:

    ===

    Brent – I installed Visual Web Developer Express and can’t get it to open when a Javascript error happens in IE — MS Script Debugger opens instead. I tried uninstalling MS Script Debugger, but then just got the usual yellow Javascript warning icon in IE’s lower left corner.

    Actually it looks like that screenshot is Visual Studio rather than Visual Web Developer Express, based on the titlebar. Have you got it working with VWDE?

    I’d really like to use it for Javascript debugging, but am frustrated about not getting it to work.

    ===

    The screenshot is definitely VWDE; there is no Visual Studio installed on that machine.

    Yes, it’s really a crapshoot as to whether it’s going to work depending on install order, with the script debugger, VWDE, etc. Mine had VWDE and then Script debugger installed and only Script debugger worked until I installed the Atlas package, which did enough mods on everything that I now get the choice of either debugger when there is an error.

         by brent June 13th, 2006 at 6:59 am

  2. Hi Brent,

    I’ll be sure to check that out. Thanks for the link.

    I’m sure it’ll be better than the original, Microsoft Script Debugger, which I find to produce horrible error messages. I do have to say, it’s quite affective at finding JS errors when enabled though.

    I usually just use FireFox’s JavaScript Console to debug any quick JS errors I find. FireFox’s JavaScript Console provide much more meaningful error messages as well as links to directly find the line of code that’s causing the problem.

    I hope Visual Web Developer Express will work out even better. Thanks.

    -Daniel

         by Fresh Daniel June 22nd, 2006 at 5:20 pm

  3. Hi Brent – Couldn’t get it to work unfortunately (even after installing Atlas). And Script Debugger crashes on me often.

    So I am trying Script Editor which is supposed to be a lot better than Script Debugger. It comes with MS-Office. I am trialling MS-Office–hopefully Script Editor won’t go away when the trial expires.

         by Jonathan Aquino June 25th, 2006 at 2:15 am

  4. I want this tool for implement the ajax as well as used for the javacript.
    Plese send your response as erly as possible

    Thanks
    sandeep

         by Sandeep Bhoir September 20th, 2006 at 5:35 am

  5. IE6 had the “break at next statement” option in the menu. I don’t see this in IE7 ???

         by Andrew September 26th, 2006 at 2:55 am

  6. Stumbled on this by accident. If you press the key you get the menu bar at the top, from which you can select view->script debugger->break at next statement.

         by Andrew October 5th, 2006 at 12:50 pm

  7. I think you can see by some of the comments here the problems with debugging javascript from IE. You have to download a package if its not already installed, flip some properties, and cross your fingers. Ooops didn’t work? Okay try this. Ooops still didn’t work, well you dummy why didn’t you… Oooops still didn’t work, try this file. Uninstall this then install this… and on and on. Then finally the debugger comes up and shows you the wrong line in a file or worse tells you that it can’t locate the file. Even better is when you put debug statements in and the debugger completely ignores them.

    Yes you have half the people who don’t know a debugger exists and then you have the other half of us who know the debugger exists but hate the fact that it doesn’t work worth a crap.

         by nhavar November 24th, 2006 at 11:47 am

  8. My script works beautifully in Mozilla, but has some bizarre bug in IE6…and I thought I was writing it to be compatible! I just installed Microsoft Script Debugger. What a crappy debugger. I can’t find anything that lets me look at variables. I just see the call stack and a command window that lets me type anything I want (for what?). I’m off to try the Script Editor with Office next, but I wonder if it will work according to others’ comments.
    Too bad Microsoft didn’t include more useful error reporting. We’d have fewer web pages with errors. Just try browsing for a few minutes with a Mozilla browser with the Javascript console open. You’ll see a ton of errors, even from big name sites.

         by Joy December 6th, 2006 at 9:09 pm

  9. Has anybody actually got Just-In-Time debugging working on VWD Express? I’m seeing the same problem as Jonathan. In the MS forum on Visual Studio Debugger the Microsoft employee responding to a similar question says JID is not supported in VWD Express (http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=909546&SiteID=1). I have seen it working on a colleage’s machinge but he’s unavailable.

         by davidm December 7th, 2006 at 12:44 am

  10. I had it also working on VWDE.
    However after installing MS Script Debugger and then uninstalling it, i cant get the VWDE to debug my scripts.
    Damn

         by Hanoch Rahimi January 11th, 2007 at 10:13 am

  11. Are you sure the screenshot is VWDE? Looked at the titlebar, it is clearly stated as Visual Studio. The title bar and icon for VWDE is different.

         by Q January 25th, 2007 at 1:25 pm

  12. The title bar is different when you’re running the IDE than when you’re running the debugger. Open a browser window and choose view..script-debugger..open and you will see how your machine displays it in debugger mode.

         by brent January 25th, 2007 at 1:32 pm

  13. Did you install other visual studio express (C, C#, etc) along with the VWDE?

         by Q January 26th, 2007 at 7:53 pm

  14. There is C# express on that box now, but I don’t think it was on there when I took the screenshot – maybe it was, though, if your experience is different.

         by brent January 26th, 2007 at 9:59 pm

  15. Try this link on how to get it working

    http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/

         by Trem March 31st, 2007 at 8:38 am