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

4 comments:

  1. Sometimes I find the DOM inspectors in generally to be too much for what I need (or too slow in the case of Firebug lite in some instances). If I'm just looking to see the IE-generated DOM, say after an Ajax call, I just print out the document.documentElement.outerHTML to a textarea and copy it.

    I've made a blog post about this:
    http://www.matts411.com/webdev/a_quick_way_to_view_generated_source_code

    Matt

    ReplyDelete
  2. Not directly related to development, but if you have to use IE anyway, I guess we should add iepro to the list as well. It makes IE behave almost like a modern browser, adding stuff like ad-block, mouse gestures and inline search.

    ReplyDelete
  3. Hi,

    I am developing DebugBar, and would like to have more details on what is missing on DebugBar Dom inspector (if you have some time).

    I know the "edit on the fly" feature is not yet here, but for everything else, DebugBar is ok : displaying dom tree, regenerating dom tree after ajax changes, showing attributes, styles, computed styles, etc....

    Feel free to send me your comments so I can improve the tool !

    Thanks.

    JFR

    ReplyDelete
  4. dit 7/29/09:
    Finally i found a good javascript console that works in IE. It does a few extra things other then giving you expressiong evaluation. its good.
    =======================================
    I really like this one and ur post helps me a lot.
    thanks.
    virux(mcm)

    ReplyDelete