Tuesday, August 05, 2008

Debug Javascript in IE

When googling for best ways to debug javascript i found that there are plenty of articles out there about it, but most are old, and some that give bad advice.

Here is what i found works in August 2008 (with updates from Jan 2010 at the bottom):

For inspecting DOM:
  • Best: Firebug lite - gives you most of the dom inspection features of firebug, in IE. Lacks on the fly editing of dom, but shows computed styles well, allows to select elements on mouse over. Can sometimes be slow.
  • Useful: IE Developer Toolbar - Also allows to inspect DOM, but the interface sucks. You can change styles on the fly with about 10 mouse clicks per change. Allows you to see the "generated source" as IE sees it. This tool is nice when firebug lite is being slow
  • Not so good: Debug Bar - I found that this is not very good for DOM inspection, it lacks most features that the above 2 tools have. It does seem to be in constant development, so it might be good to check it out.
For debugging javascript:
  • Bestest-est: Microsoft Visual Web Developer 2008 Express - There is a pretty good tutorial on how to set this up on this blog (make sure to read the comment by James if you are a firefox user). This gives you a debugger as good if not better as Frontpage's for free. It is somewhat more painful to set up and use because you have to run the actual visual web dev program. Cant beat free though.
  • Best: Microsoft Frontpage 2003 (script editor) - After installing frontpage 2003, you can use the debugger that comes with it, it has the following useful features: breakpoints, watches, evaluation, viewing the stack and a few other features i havent looked at yet. This is the best script debugger for IE.
  • Useful: Companion JS - This tools seems to be able to pinpoint the line number where a javascript error occurs better then the script editor. This is actually really useful because IE sucks at telling you what the error is, and what line number it is on. It can do evaluations, but does not really have breakpoints or anything else useful. The error reporting is really good though. NOTE: you will need to disable this debugger in order to use any of the other ones.
  • Worthless / Horrible: Script Debugger - God this tool sucks. It is the worst excuse for a debugger ever. You cant set watches. The evaluator sucks.
For making your life suck less:
  • Matt pointed out a little javascript he wrote to quickly show you the generated sourcecode in IE.
  • Erik mentioned an IE 7 plug-in to make IE have some modern browser features. For some reason this is the first time ive heard about this thing. Pretty sweet, i see no reason not to install it.
edit 7/29/2009:
Finally i found a good javascript console that works in IE. It does a few extra things other then giving you expression evaluation. its good.

edit 1/14/2010:
Found an even better bookmarklet that gives you on-the-fly css editing in IE6 etc! Looks like firebug when loaded, and has DOM inspection like firebug. Very nice. No JS debugger because its a bookmarklet, but a very useful tool for the toolbelt indeed. Dungbeetle