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.
Hi Simon,
Have you looked into the Microsoft Script Debugger?
David Lindquist - 13th December 2003 21:52 - #
Simon Willison - 13th December 2003 21:58 - #
Nope, free download here.
David Lindquist - 13th December 2003 21:59 - #
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 - #
Sasa Velickovic - 13th December 2003 22:55 - #
liorean - 14th December 2003 18:16 - #
arb - 15th December 2003 04:18 - #
I've used the
window.onerrorthingy before now, which automatically gives an error message, the file it's in, and the line number...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 tworeportfunctions 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 - #
Umm... you can drop the
errparameter from theshowReportfunction - don't know how that crept in there... it is first thing Monday morning.Andrew - 15th December 2003 10:08 - #
Adam Platti - 17th December 2003 20:29 - #
Chris Tseng - 27th April 2004 07:41 - #
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 - #
Jeff Papineau - 29th May 2004 01:22 - #
Jeff Papineau - 24th June 2004 00:34 - #
Lescot - 2nd June 2005 21:44 - #
lescot - 2nd June 2005 21:52 - #
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 - #
Nailesh - 15th September 2005 10:01 - #
praveen - 23rd September 2005 10:00 - #
praveen - 23rd September 2005 10:01 - #
Ken - 2nd October 2005 15:43 - #
Ken - 2nd October 2005 15:47 - #
Ken - 2nd October 2005 15:57 - #
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 - #
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 - #
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:
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 - #
Qaz - 3rd March 2006 10:37 - #
KG - 14th March 2006 14:45 - #
bjorn - 31st March 2006 08:51 - #
Ritu - 3rd April 2006 09:16 - #
mike - 5th April 2006 16:49 - #
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 - #
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 - #
Steve - 27th April 2006 03:38 - #
vani - 15th May 2006 21:38 - #
raffi - 21st August 2006 16:42 - #
Akela - 21st August 2006 19:50 - #
William Chau - 14th September 2006 10:48 - #
Gramo - 19th September 2006 23:44 - #
Jagan Sirigiri - 7th October 2006 13:26 - #