如何跟踪诸如 onclick onblur 之类的 JavaScript 事件？答案

【问题标题】：How to trace JavaScript events like onclick onblur?如何跟踪诸如 onclick onblur 之类的 JavaScript 事件？
【发布时间】：2008-09-18 10:05:44
【问题描述】：

有没有办法在 Internet Explorer 7 中调试或跟踪每个 JavaScript 事件？

我有一个在选择文本后阻止滚动的错误，我不知道是哪个事件或操作造成了错误。例如，我真的很想看看当我移动鼠标时触发了哪些事件。

重新连接源的工作量太大，我有点希望有像嗅探器这样的东西，它可以向我显示所有触发的事件。

【问题讨论】：

标签： javascript debugging events

【解决方案1】：

遍历页面上定义了 onXYZ 函数的所有元素，然后将跟踪添加到它们：

var allElements = document.all; // Is this right? Anyway, you get the idea.

for (var i in allElements) {
    if (typeof allElements[i].onblur == "function") {
        var oldFunc = allElements[i].onblur;
        allElements[i].onblur = function() {
             alert("onblur called");
             oldFunc();
        };
    }
}

【讨论】：

+1 用于显示代码。有趣的方法...您还可以在此处展开 alert() 以显示元素的标签名称及其 ID。使用控制台日志记录而不是 alert() 会更好，尤其是当您有很多带有处理程序的元素时。

【解决方案2】：

您可能想尝试使用 Visual Studio 2008 及其调试 JavaScript 代码的功能。

如果问题不是 Internet Explorer 7 所特有的，而且也出现在 Firefox 中，那么调试 JavaScript 代码的另一个好方法是 Firefox 和带有 JavaScript 调试器的 Firebug 插件。然后，您还可以将 console.log 语句放入 JavaScript 代码中，然后您可以在 Firebug 的 控制台窗口 中看到输出，而不是使用有时会弄乱事件链的警报。

【讨论】：

从我的阅读来看，这是一个仅限 IE7 的问题，所以 Firebug 不在图片中......这很不幸，因为它会踢其他所有东西。

【解决方案3】：

@[nickf] - 我很确定 document.all 是 Internet Explorer 特定的扩展。

您需要附加一个事件处理程序，没有办法只“观察”事件。像 Microsoft Ajax 库的 jQuery 这样的框架将轻松地为您提供添加事件处理程序的方法。 jQuery 很好，因为它的选择器框架。

然后我使用 Firebug（Firefox 扩展）并设置断点。我发现 Firebug 比 Visual Studio 2008 更容易设置和拆卸。

【讨论】：

"document.all 是 IE 特定的扩展。" ...好在这个问题是关于在 IE 中调试的，然后

【解决方案4】：

Borkdude 说：

您可能想尝试使用 Visual Studio 2008 及其调试 JavaScript 代码的功能。

我已经多次研究事件处理，在我看来，虽然经典的步进调试器对于跟踪长代码运行很有用，但它们在跟踪事件方面并不好。想象一下监听鼠标移动事件并在每个事件上闯入另一个应用程序......所以在这种情况下，我强烈建议记录。

如果问题不是 Internet Explorer 7 特有的，而且也出现在 Firefox 中，那么调试 JavaScript 代码的另一个好方法是 Firefox 和带有 JavaScript 调试器的 Firebug 插件。

还有用于 Internet Explorer 的 Firebug Lite。我没有机会使用它，但它存在。 :-) 它的缺点是它不是一个成熟的调试器，但它有一个 window.console 对象，这正是你所需要的。

【讨论】：

【解决方案5】：

这是基本的，但您可以在触发某些内容时添加警报或 document.write 调用。

【讨论】：

同意，但来源不是我的，而且有点……乱七八糟

【解决方案6】：

显而易见的方法是为各种事件设置一些警报，例如：

element.onclick = function () { alert('点击事件'); }

否则，您可以将警报插入到 dom 中的某个位置，这是一种不那么侵入性的选择。

但是，请认真考虑使用像 jQuery 这样的库来实现您的功能。许多跨浏览器问题都是已解决的问题，您无需再次解决它们。我不确定你想要实现的功能，但很可能有很多你可以使用的 jQuery 滚动和选择插件。

【讨论】：

【解决方案7】：

我不确定确切的代码（自从我编写复杂的 JavaScript 代码以来已经有一段时间了），但您可以枚举表单上的所有控件并附加一个在触发事件时输出某些内容的事件。

您甚至可以使用匿名函数来包装必要的信息，以识别正在触发的事件。

【讨论】：

【解决方案8】：

我喜欢做的一件事是在 JavaScript 中创建一个专门用于事件的绑定函数（就像您可以在 Prototype 库中找到的那样），以便它将“事件”对象传递给绑定函数。现在，如果您要这样做，您可以简单地抛出一个跟踪调用，该调用将为使用它的每个处理程序调用。然后在不需要时将其删除。一个地方。很简单。

但是，无论您如何调用跟踪语句，您仍然希望看到它。最好的策略是有一个单独的窗格或窗口来处理跟踪调用。 Dojo Toolkit 有一个在 Internet Explorer 中运行的内置控制台，还有其他类似的东西。经典的做法是创建一个新窗口和document.write。

我建议将日期时间附加到每个跟踪。过去对我帮助很大。
调试和警报通常对您没有帮助，因为它会中断正常的事件流。

【讨论】：

【解决方案9】：

Matt Berseth 的某些东西可能正是您在 Debugging ASP.NET AJAX Applications with the Trace Console AjaxControlToolkit Control 中寻找的那种东西。

它基于 Yahoo YUI 记录器，YUI 2: Logger。

【讨论】：

【解决方案10】：

我的建议是，将 FireFox 与 FireBug 一起使用，并使用内置的 Debug/Trace 对象。它们是一种魅力。

【讨论】：

阅读说明。这是IE7的问题。