[the] Code Girl (aka UnrulyGrrl)

I have a web app that uses a bunch of to do Ajaxy things as well as simple hide/show of DIVs. None of it seems to work in Internet Explorer. Since I am forced to support this horrific “browser”, I figured I better check every page within IE. IE error messsages regarding javascript suck. Like IE, they are completely utterly USELESS. Most of my error messages are a simple ‘object expected’. Wow, thanks for nothing.

I decided to give the same web app a try in Opera just to see how it behaved. Unfortunately it breaks in almost all the same parts. Bonus: the Opera Javascript console is infinitely more helpful and specific with its error messages.
Example:

Event thread: click
Error:
name: ReferenceError
message: Statement on line 1: Reference to undefined variable: showFilterOptions
Backtrace:
  Line 1 of  script
    showFilterOptions();
return false;
  At unknown location

Why the %^&* can’t IE give out that kind of info? The “script debugger” I got from MSDN was also of little use troubleshooting, and sucked up a lot of ram/cpu cycles.

Bottom line: use Opera’s javascript console to debug any javascript issues that Internet Exploder is having.

EDIT: I use Linux for my desktop and development. I can run IE thanks to WINE. However I wouldn’t even consider attempting to run additional Windoze software. Therefore Opera’s debugger is the best choice _for me, as a Linux user_. But YMMV

All the coding that I do at work is web-based, so I looked for extensions to Firefox that would help me debug/troubleshoot.
Here’s what I found, that I cannot live without:

• Firebug - fantastic for troubleshooting , css, and XMLHTTPRequest… including stack traces; also contains an inspecter and some other things. Bonus: you can add javascript code for debugging (that you wont later have to remove or comment out) by using

  console.debug

  or console.info and a few other error levels. The XMLHTTPRequest debug output alone is worth its weight in gold (i’ve been doing a log Ajax-type stuff lately so it has come in really handy)

• Web Developer toolbar - Contains a boatload of useful things. My favorites: showing all class/id details, displaying element information as you move around a page, and ‘view source -> generated source’ (YES, you can see the source of a page that was dynamically generated without resubmitting the form (as the default ‘view source’ requires)
• Live HTTP Headers - shows you HTTP headers being sent and received real time. You can filter which sites you care about or exclude things like images. Also shows you form-related POST and GET (both requests and responses). Great for finding out what hitting Submit actually sent
• Find in Statusbar - not just for developers but anyone who wants to conserve precious screen real estate. adds a small search text box to the status bar instead of popping up a new section above the statusbar….also dont have to worry about accidentally making it pop up by certain key combinations.