如何跟踪像onclick onblur这样的JavaScript事件？

Question

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

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

重新连接源是太多的工作，我希望有一些像嗅探器一样向我展示所有被触发的事件。

Answer 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();
        };
    }
}

Answer 2

您可能希望尝试使用Visual Studio 2008及其功能来调试JavaScript代码。

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

Answer 3

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

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

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

Answer 4

Borkdude说：

您可能希望尝试使用Visual Studio 2008及其功能来调试JavaScript代码。

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

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

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

Answer 5

它是基本的，但你可以在触发某些东西时粘贴警报或document.write调用。

Answer 6

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

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

Answer 7

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

element.onclick = function () { alert('Click event'); }

否则，您可以选择将警报插入到某处的dom中。

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

Answer 8

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

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

• 我建议在每条迹线上附加日期时间。 过去帮助了我很多。
• 调试和警报通常对您没有帮助，因为它会中断正常的事件流。

Answer 9

Matt Berseth在使用Trace Console AjaxControlToolkit Control调试ASP.NET AJAX应用程序时可能会遇到一些问题。

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

Answer 10

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