如何在jQuery脚本中追踪Heisenbug？

Question

我需要帮助。我的代码中有一个Heisenbug。它只会偶尔出现，不能故意触发。

FireBug抛出一个异常，例如“指定了无效或非法的字符串”，并引用jQuery 中的一行，如下所示：

} else {

<击> 无论如何，我会感激任何帮助！我已经尝试过使用FireQuery，但这会干扰我的代码，所以它没有选择。

//编辑：提到的位置正在跳转，并没有引用错误本身。

//编辑：我已将其追踪到如下所示的行：

context.fillText("[[*longtitle]]", x + 4, y + h + 15, w);

我正在使用MODX CMS来构建该网站（这是[[* longtitle]]和[[* id]]和东西的来源;它们是模板占位符）。这是该行所在的完整功能：

($("imagecvs-[[*id]]").ready(function() {
    var canvas = $("#imagecvs-[[*id]]").get(0);
    if (canvas.getContext) {
    var context = canvas.getContext('2d');
    var img = new Image();

    img.src = "[[*Photo]]";

    var scale = 0.6;
    var ratio = img.width / img.height;

    var w = Math.min(img.width * scale, 120);
    var h = w / ratio;
    var x = 0;
    var y = (canvas.height / 2.0) - (h / 2.0);

    var deg = -8;
    var rad = (deg * Math.PI / 180);
    // y += (h / 2) * -Math.sin( rad );
    context.rotate(rad);

    context.fillStyle = "#FFF";
    context.fillRect(x - 5, y - 5, w + 10, h + 30);
    context.drawImage(img, x, y, w, h);

    context.font = "Italic Bold 10px Serif";
    context.textAlign = "left";
    context.textBaseline = "ideographic";
    context.fillStyle = "#000";
    context.fillText("This is a test", x + 4, y + h + 15, w); // Exception thrown here; even with 'This is a test'
    }
    return true;
  }));

更多信息：我正在使用FireFox 10.0。该网站位于http://www.roboter-club-hamburg.de。

Answer 1

好吧，我找到了这个bug的原因。这是因为在脚本要求宽度和高度时图像（img）有时没有被完全加载。因此两者都是NaN并且脚本崩溃（fillText显然不适用于NaN的宽度）。

现在，我为解决这个问题所做的就是将绘图步骤移到img的onload回调中。这样可行。这个Heisenbug已不复存在。

非常感谢！

Answer 2

我现在不知道如何在FireBug中执行此操作，但在WebKit Web检查器（here for FireBug）中，您可以选择中断异常。

您可以查看调用堆栈以查看代码调用此JQuery代码的位置。我不认为问题出在JQuery中。您可能会将无效参数传递给函数。