问题 如何跟踪像onclick onblur这样的JavaScript事件?


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

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

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


2512
2017-09-18 10:05


起源



答案:


Borkdude说:

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

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

如果问题不是特定于Internet Explorer 7,而是在Firefox中发生,那么调试JavaScript代码的另一个好方法是Firefox和 萤火 附加组件,它有一个JavaScript调试器。

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


1
2017-09-18 12:50





遍历页面上定义了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();
        };
    }
}

11
2017-09-18 13:03



用于显示代码的+1。有趣的方法......您还可以在此处展开​​alert()以显示元素的标记名称及其ID。使用控制台日志记录而不是alert()会更好,特别是如果你有很多带处理程序的元素。 - LarsH


答案:


Borkdude说:

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

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

如果问题不是特定于Internet Explorer 7,而是在Firefox中发生,那么调试JavaScript代码的另一个好方法是Firefox和 萤火 附加组件,它有一个JavaScript调试器。

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


1
2017-09-18 12:50





遍历页面上定义了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();
        };
    }
}

11
2017-09-18 13:03



用于显示代码的+1。有趣的方法......您还可以在此处展开​​alert()以显示元素的标记名称及其ID。使用控制台日志记录而不是alert()会更好,特别是如果你有很多带处理程序的元素。 - LarsH


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

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


2
2017-09-18 10:13



从我读到的,这是一个IE7唯一的问题,所以Firebug是不可能的...这是不幸的,因为它踢其他一切。 - Oli
对了谢谢。我根据你的评论调整了我的答案。 - Michiel Borkent


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

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

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


2
2017-09-18 13:07



“document.all是IE特定的扩展。”好的,这个问题是关于在IE中进行调试的 - nickf


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


0
2017-09-18 10:12



同意,但来源不是我的,而且有点......凌乱 - Mafti


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

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

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

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


0
2017-09-18 10:14





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

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


0
2017-09-18 10:14