IE8 gives error "Invalid argument" when using prototype.js, how do I find where the error is?

I have a fairly complex piece of Javascript that works flawlessly with no errors in Google Chrome, Firefox, Safari, and Opera. However, as tends to always be the endlessly annoying case, it completely fails in Internet Explorer. I have tested in IE7 and IE8 and get the same error:

Invalid argument. prototype.js, line 2216, character 9

I am using Prototype 1.6.1 hosted through Google. The error given isn't very helpful since it doesn't tell me where in my actual code the error is occurring. The line mentioned in the error is the 6th line from the bottom in the following code:

setStyle: function(element, styles) {
    element = $(element);
    var elementStyle = element.style, match;
    if (Object.isString(styles)) {
      element.style.cssText += ';' + styles;
      return styles.i开发者_运维技巧nclude('opacity') ?
        element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) : element;
    }
    for (var property in styles)
      if (property == 'opacity') element.setOpacity(styles[property]);
      else
        elementStyle[(property == 'float' || property == 'cssFloat') ?
          (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
            property] = styles[property];

    return element;
  },

Since it is in the setStyle block of code, I assume the error occurs when I am setting style attributes for some element. However, I call setStyle over 100 times in this script and have been trying to figure out where exactly the error is occurring for several hours. Is there anything I can do to help myself in finding where the error is occurring?

Put an explicit try ... catch around the code:

for (var property in styles) {
  try {
    if (property == 'opacity') element.setOpacity(styles[property]);
    else
      elementStyle[(property == 'float' || property == 'cssFloat') ?
        (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
          property] = styles[property];
  }
  catch (_) {
    throw "Error setting property '" + property + "' to value '" + styles[property] + "'";
  }
}

Then you'll know exactly what property and value is causing the problem.

In IE8 enable the developer tool to break on error [5th button on the script tab.] Click the Start Debugging button.

When the error occurs, you should be able to inspect the varaibles and see what is causing the problem exactly.

Try debugging with Microsoft® Visual Web Developer® 2010 Express, it's free and very easy to use while debugging on IE.

You've already marked your chosen answer so have probably found the cause by now. The line in question concerns setting opacity (which IE handles as it's proprietary filter) so I suggest looking for calls to setStyle that set an opacity, perhaps ones that set an unusual value.

The problem is caused by setStyle({someProperty: null}). Maybe also undefined or something kind of.

To investigate such problems in future, inspect arguments you give to third-party functions in catch block. Kind of

try{
  element.setStyle({someProperty: someValue})
}catch(error){
  throw('' + someProperty + ':' + someValue)
}

This code would have pointed you to the source of the error in zero time. Here is more detailed snippet for debugging this case using some Prototype.js' helpers:

;(function () {
  var superFunction = Element.setStyle
  Element.addMethods({
    setStyle: function (element, _arguments) {
      try{
        superFunction(element, _arguments)
      }catch(error){
        console.log(error, $H(_arguments).inspect())
      }
    }
  })
})()

P.S. in IE8 you should open Developer Tools (F12) to have console working.