Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Javascript debugging: IE Option gotcha

I’ve been debugging Javascript today. I like Javascript as a language, but I doubt anyone would disagree that it’s a horrible, horrible language to debug across multiple browsers. Firebird at least has good debugging support—I currently use the Javascript Console and Jesse Ruderman’s shell bookmarklet and I really need to learn to use Venkman some day. If anyone knows a better way of debugging Javascript in IE than relying on the lame popup box I’d love to hear about it.

In any case, one bug that I successfully vanquished today involved the humble <option> element. My HTML looked something like this:

<select name="categories" multiple="multiple" id="catfrom" size="20">
 <option>entertainment</option>
 <option>movies</option>
 <option>sports</option>
 <option>news</option>
</select>

I was having all kinds of strange problems in IE, which I finally tracked down to the following gotcha: in IE, the value property of an Option object is empty if the corresponding option tag doesn’t have a value attribute. This is counter-intuitive because in HTML if an option attribute is omitted the text inside the option element is used as the value instead. Mozilla browsers duplicate this in their handling of the Option object; IE doesn’t. Hopefully this tip will save someone some debugging time in the future.

Update: David Lindquist pointed me to Microsoft’s free Script Debugger.

This is Javascript debugging: IE Option gotcha by Simon Willison, posted on 13th December 2003.

View blog reactions

Next: Mac buying advice needed

Previous: Grouping table data by header

40 comments

  1. Hi Simon,

    Have you looked into the Microsoft Script Debugger?

    David Lindquist - 13th December 2003 21:52 - #

  2. Aha! I thought there was something like that - I've used a PC once in the past where it popped up. Is it available as a free download or are you expected to shell out big bucks for something like Visual Studio?

    Simon Willison - 13th December 2003 21:58 - #

  3. Nope, free download here.

    David Lindquist - 13th December 2003 21:59 - #

  4. Sorry, to debug some JavaScript I've never needed more than some incrementing status bar messages and/or alert boxes and/or DIV popuplated via an introspection function. I don't know how to use Venkman, but I think it should be used at last resort since the good old methods proved to be fast and efficient.

    I had the Microsoft Script Debugger before, but it was bugging me. I didn't bear to see that huge puppy being launched everytime a bug occured on a page and bring me nothing I could have found myself. I'm probably too "oldschool" to find some interrest in a JavaScript debugger ^__^

    P01 - 13th December 2003 22:22 - #

  5. Take the time to go through Learning the JavaScript debugger Venkman. It took me 2 hours but it is very well written and really worth the effort. Venkman really is an amazing piece of software.

    Sasa Velickovic - 13th December 2003 22:55 - #

  6. I personally find that the javascript console of Mozilla is thge absolutely best tool: However, if you're using events, and even in some cases where you aren't Opera 7 has a really informative JavaScript console. As for Iew only scripts, the debugger makes error finding easier, but it's no replacement for the alert boxes - though I tend to prefer to use prompt boxes because that allows easy copy/pasting. I suspect that if I learnt to use Venkman, I'd recommend it, but today I see no reason to take the time to leatn to use Venkman, since strict warnings and JavaScript console are good enough for almost all debugging in moz.

    liorean - 14th December 2003 18:16 - #

  7. I haven't used Venkman as yet, but when doing some serious Javascript/DHTML work with Netscape 4.7x years back the Netscape Javascript Debugger was way cool. Breakpoints, watches, a rudimentary object explorer - pretty handy. The Microsoft JS Debugger OTOH was pretty basic. If you are lucky, it seems to give you not much more than the Javascript console. If you have Visual Studio installed alongside the Javascript debugger, sometimes IE can get confused as to which environment to drop you into, leading to all sorts of nastiness. IMHO, Javascript debugging is still pretty much a black art which needs to be practised using old-school techniques.

    arb - 15th December 2003 04:18 - #

  8. I've used the window.onerror thingy before now, which automatically gives an error message, the file it's in, and the line number...

    var reportStatus = new Array();
    function report ( msg ) {
        reportStatus.push ( msg );
    }
    function showReport ( err ) {
        alert ( reportStatus.join ( "\n" ) );
    }
    window.onerror = function ( err, url, line ) {
        report ( err + " [" + url + " - line " + line + "]" );
        showReport();
    }

    Then you can spread report( {something relevant} ) throughout your code, and you don't have to see it until there's a problem... (you can of course drop the two report functions and do the functionality pretty easily inline, but it would be pretty hard to explain without a demo.)

    But yes, I would have to agree with many of the comments above - the process is pretty much a black art, and I prefer the "oldschool" methods anyway. But if in doubt, just run it through Mozilla and see what pops up in the console.

    Andrew - 15th December 2003 10:07 - #

  9. Umm... you can drop the err parameter from the showReport function - don't know how that crept in there... it is first thing Monday morning.

    Andrew - 15th December 2003 10:08 - #

  10. Hello, I use Visual Interdev to debug web pages in IE. It's a lot better than the free script debugger, but you have to pay for it. Interdev is the only thing that makes advanced JavaScript and DHTML possible in my opinion. Not many companies have the time or money to pay a developer to spend an entire day writing alert() messages in order to correct bugs.

    Adam Platti - 17th December 2003 20:29 - #

  11. Please try to use Front Page 2003 with its embedded toolkit call Microsoft Script Editor, which can easily identify the exactly line error of JavaScripts via GUI. It is really works for us with many JS files in one JSP or ASP here. Hope it helps,

    Chris Tseng - 27th April 2004 07:41 - #

  12. HOW TO DEBUG JAVASCRIPT (in JSP or JS Files) USING MS SCRIPT EDITOR
    I finally found a good JS script debugging solution; it sounds vanilla and mundane,
    but after researching for many hours, I found one guy that mentioned his group is using the
    Microsoft Script Editor included as a stand-alone utility with FrontPage 2003 and FP_XP. It works great for JSP development if you have a lot of JS included in your application or website. Here's how:
    1) From the Start Menu, if Frontpage is listed, start it, (don't worry, FP is a vanilla HTML editor
    in it's current incarnation and does not have the multiple configuration issues of past versions,
    like running a local IIS and using special web directories, it's now very similar to WORD) and
    search on the help files for "Script Debug".
    If Frontpage is not in your start menu, it is possible to add only the script editor as a standalone
    application. Go to Control Panel, Add/Remove Software and open the Office Add/Remove/Repair function.
    Here you can look for Office Tools, Script Editor and Debugger and set them to run from your hard disk.
    This should install them from CAB files on your hard disk, but it may be necessary to use the
    Office CD as an alternative.
    2) Start the Scripting Editor found under Tools/Macros/Script Editor in Frontpage. If you loaded only
    the script editor, the target is:
    "C:\Program Files\Microsoft Office\Office10\MSE7.EXE"
    and you can put a shortcut for it in your quickstart menu with this path.
    3) Once the script editor was started, run the Web Debugging option under the Debug Menu.
    - this will prompt you to install the debugging features and warns that the editor will have to be
    restarted to use the Debugger.
    4) Now add the debugger keyword to any script, and it open the script editor at that point, when
    the script is run in the browser. (I've tried to make the debugger come up when the browser issues an
    error alert and it simply does not work for me, perhaps because of a previous VS InterDev installation
    I removed from my machine, but I don't really need it to work, since I have the debugger keyword which
    forces the script editor window to open.

    4a) You may be prompted to run a regedit script the first time you try to use the debugger. Open a CMD
    window and run the path in the prompt, to set the proper Registry settings:
    C:\Program Files\Common Files\Microsoft Shared\VS7Debug\vs7jit.exe /RegServer
    5) Notice once the editor opens, the script is now open in the editor, and you have yellow highlighted
    line and pointer where the debugger keyword was used in the script.

    6) Under the Debugger menu, there are now all the typical debugging commands available.
    Also notice:

    a) Expression evaluation is available is Quick Watch, and vars can be added to a Watch List.
    b) DOM objects may be inspected in the browser document tree, as to ID, ParentId, etc and the
    entire DOM tree can be walked thru in it's full heirarchy.
    c) Stepping thru the script is easy with Step In, Step Over; break points may be added.
    d) .JS files will be opened as the program execution requires (MAE application opens several)
    e) A toolbar for the debugging commands exists but will need to be configured and placed ala IE.
    f) All debugger commands have keyboard shortcuts that speed things along...
    g) If you have Script Debugger listed under your IE6 View menu, you can use the Break at Next
    Statement to make the debugger come up on the next JS event fired in your browser - WAY COOL
    7) Also refer to the Help file in the Script Editor for debugger commands help. It's short and sweet.
    8) If you don't get the Script Debugger in your View Menu, or you can't get the script editor to come
    up for you working correctly, try running the MSScrDbg.reg script (look around on Google for it) and see
    if that helps.
    9) Order of install is important; don't uninstall the MS Script Debugger after installing the MS Script
    Editor; it will mess up your registry settings and you will have to start over from scratch...
    If you see behavior other than what I have described above, I'd be interested to know about it.
    Jeff Papineau

    Jeff Papineau - 29th May 2004 01:20 - #

  13. One other comment; you DO NOT HAVE TO HAVE FRONTPAGE ON YOUR MACHINE in order to use the MS Script Editor. It's included under Tools on the MS Office CD!

    Jeff Papineau - 29th May 2004 01:22 - #

  14. Here's an updated page with the above info: http://www.mandala.com/javascript/debug_javascript .html

    Jeff Papineau - 24th June 2004 00:34 - #

  15. Not sure what I am doing here, but thought maybe someone out there might read this and be able to help me. I do not need, nor do I use anykind of a script error debugger but yet somehow or another it got loaded and showed up into my view drop down menu using Internet Explorer 6. Now since it has showed up there I cannot do much of anything on the Internet without getting a runtime error do I wish to debug and sorry access is denied. I can't work around it, I have tried for weeks now to work around it and/or delete it or get it off my machine and out of the "View" list, to no avail. I have searched for weeks now on the Internet and anywhere else my searchs have led me and have not found one solid help experience that will get this function removed so I can go on enjoying my computer and the use of browsing the Internet and using e-mail. As it stands right now I am not able to do much of anything within my e-mail account on the web. I don't even know for sure if I will be able to view any incoming messages at the address listed above so any alternate address which I can use a little bit while all this is obstructing my normal useage of the Internet is: lescot1@yahoo.com So if there is anyone out there that has so positive correction procedures, please do help me! Thanks in advance of all the help I may receive. I know there are a lot of very smart people out there about the Internet and sorry to say I am not one of them, it doesn't seem because this one has kicked my rear. Thanks Lescot

    Lescot - 2nd June 2005 21:44 - #

  16. An addition to the above statement by me, when I first put up the message my main e-mail address I listed in the form didnot come up and display so here is the main one and my backup e-mail as well. Between the two of them perhaps I will be able to receive a message, that is if anyone is kind enough to write with a fix for this problem. My primary e-mail address is: lescot@sbcglobal.net and the backup is: lescot1@yahoo.com Thanks, Lescot

    lescot - 2nd June 2005 21:52 - #

  17. If you have Visual Studio 2003 you can choose Debug -> Processors... in the list of processors select "iexplorer.exe" and click on the Attach... button.

    Only select the Script option and click OK. You can now load up the script, set breakpoints and step through your script.

    Tim - 19th August 2005 07:52 - #

  18. Hi, can any one tell me, how can i add support for other languages like VB/ASP in Microsoft Script Editor? As i have Microsoft Script Editor but when I am opening ASP or VB file its simply showing plain text. Its not showing it with different colors. i.e. its not getting the language. how can i add such functionality ?

    Nailesh - 15th September 2005 10:01 - #

  19. hi, i have a webapplication devoloped in struts where jsp user javascript for some functionalities. the application is working fine in most systems, but there is one system which constantly throwing javascript error such as "unexpected indentifier". the most amazing thing is, all these functions worked in most systems, please, help me to get out of this.

    praveen - 23rd September 2005 10:00 - #

  20. hi, i have a webapplication devoloped in struts where jsp uses javascript for some functionalities like for showing date. the application is working fine in most systems, but there is one system which constantly throwing javascript error such as "unexpected indentifier". the most amazing thing is, all these functions worked in most systems and each system having same version of internet explorer please, help me to get out of this.

    praveen - 23rd September 2005 10:01 - #

  21. MS Script Editor and Visual Studio .NET are good and pro choices, but there´s one thing you must be very carefull when using those tools when debugging JS: the intellisense will show several MS proprietary properties so if you are a novice you may tend to create pages in a non web standard fashion. Avoid the proprietary things and you´ll have an excellent debugger. Visual Studio .NET beta 2 has the best JS debugger I´ve ever seen so far.

    Ken - 2nd October 2005 15:43 - #

  22. About Venkman: well, I know how to use it. It is a bit complicated to start learning, but it does a great job. It is very slow though, some say it is because JS is an interpreted language, but MS Script Editor and Visual Studio .NET are much faster than Venkman.

    Ken - 2nd October 2005 15:47 - #

  23. One more thing about MS Script Editor: although it is a good tool, it is not updated frequently! Visual Studio .NET is more up-to-date, but it is expensive. I use the beta version anyway.

    Ken - 2nd October 2005 15:57 - #

  24. One thing I use is this: for a troublesome function, or a new function, wrap the whole thing in a try statement, create a variable before the try statement called comment, and keep updating it through the code. Catch any errors and display the comment. Simple, but better than loads of alerts to click through.
    function blahblah()
    {
        var comment;
        try {
            comment = "adding two numbers";
            var a = 2+2;
            
            comment = "saying hello";
            var hello ="hello";
            alert(hallo);
    
        } catch (e) { alert("while "+comment+": "+e.description); }
    }
    

    Mike Amy - 2nd November 2005 12:08 - #

  25. I can't imagine trying to develop anything major in javascript without Venkman now. I don't see that its that hard to "learn". Its exactly like any run time debugger. If you've used the debugger in Visual Studio you can figure out Venkman in a few minutes.

    Now, that said, I don't have Venkman on all the time. Mostly I just use the console. This is primarily becase Venkman is unstable. It tends to crash Firefox every couple of hours or so. However, when you get one of those nasty bugs that tend to crop up in javascript it is invaluable.

    Venkman can be configured to automatically stop on an error (right click in the black space at the bottom to get a menu). When it breaks you can see the value of all variable and a call stack! This single feature has saved me hours of time over the way I used to go about debugging. Plus you can put in breakpoints. You can even do conditional breakpoints. This is another feature that has saved me hours of time. And of course inspecting the state of every single variable is handy too.

    Would you rather have a tool that breaks on an error and then you can see the values of all your variables and a call stack - or put in a series of alert() calls and do the rest by guess work?

    Trust me. Install Venkman. Play with it for 5 minutes. You might not figure out all of it intricacies immediately, but if you've used any visual run time debugger before (VC++, Borland Builder, etc) you will figure it out in 5 minutes. I did.

    Jon Thompson - 12th December 2005 19:34 - #

  26. Instead of debugging, logging is also often helpful. Think of going live and having no debugger on users browser.

    There is a logging API - log4js

    Have a look at http://log4js.berlios.de

    There are different appenders which can be used:

    • AJAXAppender to send the logging informating back to the server to analyze them there!
    • FileAppender which is writing to a local file at IE. Useful for HTA.
    • WindowsEventAppender appending to Windows Event list (also IE)
    • WindowAppender appending to a popup window or in a div within the page
    • JavaScript Console Appender appending to FireFox JavaScript Console.

    Also the layout of the dump is configurable. If you already know log4j the Java logging, log4js is very simmilar!

    Stephan@st-strittmatter.name - 8th January 2006 20:28 - #

  27. Another useful feature of Venkman is the Interactive Session. Once you've reached your breakpoint you can type and run any js commands you may find usefull while the browser window has paused. All the js files currently loaded for the session are available to you. This also includes any native javascript which comes with Firefox and installed Extensions that were built with js.

    Qaz - 3rd March 2006 10:37 - #

  28. For debuging don't forget checking off IE advanced setting "disabled script Internet Explorer "

    KG - 14th March 2006 14:45 - #

  29. Visual studio is great of debugging Javascript. I've written a short post on it here: Debugging JavaScript with MS Visual Studio

    bjorn - 31st March 2006 08:51 - #

  30. I have problem with javascript when i run a web application on my machine it works fine but particulary on one laptop it is givving javascript error what could be the error or problem Can anyone help

    Ritu - 3rd April 2006 09:16 - #

  31. does the script debugger (microsoft one) work in IE7 beta 2? I can't get it to work myself.

    mike - 5th April 2006 16:49 - #

  32. If you have set your MS IE6+ Advanced settings to NOT disable debugging, you should be prompted to "Debug script?" when an error is encountered. If that occurs and you choose to debug, the MSE7.exe should lauch by iteself.

    However, if that does not happen, try this:

    Manually launch MSE7.exe and click DEBUG, then click PROCESSES. From the list of running processes on your machine, choose the instance of Internet Explorer that you wish to debug. This will instruct the debugger to bind / monitor that particular process.

    If your script does not have any errors, but you wish to debug anyway, use MSE7.exe to open the file that contains the script and set your breakpoints.

    Good luck! Paul D. InfinityRD.com

    Paul D. - 23rd April 2006 23:39 - #

  33. My apologies; I failed to mention something in the 3rd paragraph.

    Here's the correction:

    Manually launch MSE7.exe and click DEBUG, then click PROCESSES. From the list of running processes on your machine, choose the instance of Internet Explorer that you wish to debug and click ATTACH and then CLOSE. This will instruct the debugger to bind / monitor that particular process.

    Paul D. - 24th April 2006 00:17 - #

  34. Thanks!!

    Steve - 27th April 2006 03:38 - #

  35. Can somebody tell me where I have to start looking at if I receive an error message when I click on the radio button and I receive 'Error on Page' message. Thanks, Vani

    vani - 15th May 2006 21:38 - #

  36. Firebug, the Javascript debugger for Firefox, has superceded Venkman, in my opinion. It's also very easy to use.

    raffi - 21st August 2006 16:42 - #

  37. Nice Javascript debuggers review can be find here: http://www.ajaxpath.com/ajax-debuggers/

    Akela - 21st August 2006 19:50 - #

  38. referring to: HOW TO DEBUG JAVASCRIPT (in JSP or JS Files) USING MS SCRIPT EDITOR It works for js inside a html page but not for js in an embedded object on a html page (like SVG js) I couldn't find MSScrDbg.reg (a search on Google finds only this page!) but after doing what Kevin Lindsey had done: http://www.kevlindev.com/blog/?p=56 it works! Thought this might be very handy for other people

    William Chau - 14th September 2006 10:48 - #

  39. Thanks... you save me a lot of time!!!

    Gramo - 19th September 2006 23:44 - #

  40. Hi,Can we use Venkman to debug javascript in IE also or is it only for Netscape ,Oera and others?I read about this on internet and came to know that is not for IE?I need a javascript debugger and tired of Microsoft Debugger which is not much helpful in showing errors

    Jagan Sirigiri - 7th October 2006 13:26 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/12/13/ieGotcha

A django site