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

Question

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.include('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?

The problem is very likely that you're trying to set a style property to some invalid value. As a side note, doing your loop that way (`for ... in`) is pretty dangerous, **especially** when you're using Prototype. You should include a check for `hasOwnProperty` at least. — Pointy, Nov 01 '10 at 17:42
@Pointy, hahaha... but wait... Prototype.js does not extend `Object.prototype` with any extra property, so why laugh? — meandre, Oct 12 '12 at 17:04
@meandre well I'm not *exactly* sure, as I wrote that two years ago, but I think I "laughed" because I though that the code was code the OP had written. I agree that in this case `for ... in` is probably not a "risky" thing. — Pointy, Oct 12 '12 at 17:07

score 4 · Accepted Answer · answered Nov 01 '10 at 17:45

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.

score 3 · Answer 2 · answered Nov 01 '10 at 17:45

3

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.

answered Nov 01 '10 at 17:45

epascarello

204,599
20
195
236

score 0 · Answer 3 · answered Oct 01 '12 at 08:47

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.

score 0 · Answer 4 · answered Nov 01 '10 at 18:30

0

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

answered Nov 01 '10 at 18:30

Jochen

1,853
3
20
28

score 0 · Answer 5 · answered Nov 01 '10 at 18:51

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.

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

5 Answers5