JavaScript：如何调试键盘事件

Question

想象一下一个使用自定义键盘事件处理程序的Web应用程序，这些处理程序可能会做事件冒泡或事件捕获。
是否有一种方法（例如Firefox/Firebug插件）可以调试每个按键/键盘事件，类似于：

• 显示事件类型和所有属性
• 跟踪调用了哪个JavaScript方法
• 在事件冒泡的情况下，调用了哪些进一步的方法

为了澄清我的问题：我不知道存在哪些方法处理程序以及它们在哪里定义-这就是我试图找出的内容。

- MRalwasser

Answer 1

你可以尝试使用Firebug和Eventbug扩展程序来可视化事件。

如果想要了解不同浏览器中键盘事件的概述，请查看http://unixpapa.com/js/key.html。

- chiborg

Answer 2

在IE中，您可以使用debugger;关键字。不确定跨浏览器的兼容性：

function sayHello() {
     debugger; // will break here and launch script debugging in IE
     alert('hello world');
}

在您的挑战的背景下：

function someKeyPress(e) {
     debugger;
     // inspect e.keyCode ... etc
}

我认为这是最有效的调试技术，但我花了很多时间在IE上。许多人喜欢使用Firebug，但我觉得它比IE的调试器更加笨重和不直观。IE的调试器提供了更容易的监视和表达式评估，并且还提供基于交互反射的工具提示（如VS调试器）。

此外，针对您的问题“跟踪调用的方法”-调用堆栈非常响应并且易于追踪。

更新:

以下是一个脚本，可将其放置在每个页面底部以捕获和调试IE中的事件：

<script type="text/javascript">
    function wrapIfHandled(el, evt) {
        if (el && evt && el['on' + evt]) {
            el['_on' + evt] = el['on' + evt];
            el['on' + evt] = function (e) {
                foo(e, el['_on' + evt]);
            };
        }
    }

    function wrapAll() {
        var allEl = document.getElementsByTagName("*");
        for (var i = 0; i < allEl.length; i++) {
            wrapIfHandled(allEl[i], 'click');
            // wrapIfHandled(allEl[i], other event names <keyup, keydown, etc>
        }
    }

    function foo(e, d) {
        debugger;
        d(e);
    }

    wrapAll();
</script>

- Brian

---

为此，我必须知道使用哪些方法作为事件处理程序 - 但这正是我试图找出的内容。 - MRalwasser

您能提供更多关于您问题的细节吗？您没有访问JavaScript代码、HTML/Java/PHP/ASPX页面吗？还是两者都没有？您是否能够访问任何源代码？ - Brian

是的，我可以访问源代码。想象一下一个旧的Web应用程序，它在每个页面上单独定义事件处理程序而不是在通用位置上定义。我遇到的问题是，在某些浏览器上的某些页面上，某些按键无法正常工作（但没有JavaScript错误）。我需要一个工具来跟踪所有键盘事件，以便能够快速查看事件处理的位置。 - MRalwasser

我尽力帮助你 - 不确定你的网站如何运作以及你使用什么事件管理工具，但如果没有第三方观察器组件，则代码应该可以正常工作。 - Brian

Answer 3

我不知道有什么适用于此目的的扩展。但是，您可以编写键事件处理程序，然后将适当的输出打印到JavaScript控制台。您还可以转储跟踪信息。Firebug具有内置的跟踪功能：console.trace()。您可以使用js trace关键字在Google上查找一些跟踪工具。

这个页面是处理键盘事件的一个很好的例子。

- useraged

---

为此，我必须知道关键事件处理程序的定义位置。但这正是我的问题所在，我不知道哪些事件处理程序方法被调用。想象一下一个非常庞大且古老的软件系统 - 找到所有这些方法可能会变得困难。 - MRalwasser