IE8 给出错误“无效参数”使用prototype.js时，如何找到错误所在？

Question

我有一段相当复杂的 Javascript，可以在 Google Chrome、Firefox、Safari 和 Opera 中完美运行，没有错误。然而，正如总是令人烦恼的情况一样，它在 Internet Explorer 中完全失败了。我在IE7和IE8下测试过，都出现同样的错误：

参数无效。原型.js，行 2216，字符 9

我正在使用通过 Google 托管的 Prototype 1.6.1。给出的错误不是很有帮助，因为它没有告诉我实际代码中发生错误的位置。错误中提到的行是以下代码中从底部算起的第 6 行：

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;
  },

由于它位于 setStyle 代码块中，因此我假设在为某些元素设置样式属性时会发生错误。但是，我在此脚本中调用 setStyle 超过 100 次，并且几个小时以来一直试图找出错误发生的具体位置。我可以做些什么来帮助自己找到错误发生的位置吗？

Answer 1

在代码周围放置显式的 try ... catch：

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] + "'";
  }
}

然后您将确切地知道是什么属性和值导致了问题。

Answer 2

在 IE8 中，启用开发人员工具以在错误时中断 [脚本选项卡上的第 5 个按钮。] 单击开始调试按钮。

发生错误时，您应该能够检查变量并准确了解导致问题的原因。

Answer 3

尝试使用 Microsoft® Visual Web Developer® 2010 Express 进行调试，它是免费的，并且在 IE 上调试时非常易于使用。

Answer 4

您已经标记了您选择的答案，因此现在可能已经找到原因了。有问题的行涉及设置不透明度（IE 处理它，因为它是专有过滤器），因此我建议寻找对设置不透明度的 setStyle 的调用，也许是设置不寻常值的调用。

Answer 5

该问题是由 setStyle({someProperty: null}) 引起的。
也许还有未定义或类似的东西。

为了将来调查此类问题，请检查您在 catch 块中提供给第三方函数的参数。这种

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

代码会在零时间内向您指出错误的根源。以下是使用一些 Prototype.js 帮助程序调试此案例的更详细片段：

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

PS 在 IE8 中，您应该打开开发人员工具 (F12) 以使 console 工作。