Cross-browser JavaScript

Working on a web application, dealing with some cross-browser JavaScript issues. My main development platform is Firefox + FireBug extension, and I had everything working there just great. It took a while to get it working on other browsers — recording lessons learned here.

Lesson 1: Firefox – Opera – IE

After getting things working in Firefox, I found the next best platform for testing is Opera. Opera’s JavaScript engine seems a bit stricter on some things that Firefox, so it generates errors on things that Firefox handles fine. While not nearly as nice has FireBug, Opera does have an Error Console feature that is pretty clear on both the location and the meaning of the errors.

Finally it comes to testing Internet Explorer — IE6 to be precise. The tools for JavaScript debugging in IE6 are awful, it is a painful experience. So do all your testing on other platforms first.

Lesson 2: The real issues

Once I figured out a good debugging strategy, it wasn’t too hard to fix my problems. It came down to a few syntactic constructs that I now know to avoid in the future:

  • Don’t use assignment in an if() statement
    • Okay in Firefox and Opera:
      if ( foo = something() ) { ... }
    • Alternative that works in IE6 as well:
      var foo = something(); if ( foo ) { ... }
  • In hash / object construct, don’t leave dangling ‘,’ after last pair
    • Okay in Firefox:
      { a: 1, b: 2, c: 3, }
    • Alternative for Opera and IE6:
      { a: 1, b: 2, c: 3 }

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: