debugging javascript for IE6

Question

firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:

"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"

or

"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.

my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;

• how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?

• where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?

I am lost so please give me any direction to start..

Answer 1

You debug javascript in IE6 with:-

Microsoft Script Debugger

The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.

Answer 2

I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.

As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.

When making an an application to be used in multiple browsers, quirksmode is a lifesaver.

EDIT: blackbird is a nice cross-browser tool for tracking state.

Answer 3

The two tools I use are:

1. Web Development Helper
2. IE Developer Toolbar

They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.

Answer 4

"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"

The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.

You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.

IE8 finally fixes this.

shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?

Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.

The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.

All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.

Answer 5

or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.

Answer 6

You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.

Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.

Answer 7

For what it's worth, I've found the line number errors are much more accurate when using a separate js file.

I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.

I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger

Answer 8

I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.