javascript：如何調試鍵盤事件

Question

想象一個 web 應用程序，它使用自定義鍵盤事件處理程序，可能會進行事件冒泡或事件捕獲。
有沒有辦法（例如 Firefox/Firebug 插件）來調試每個按鍵/鍵盤事件，例如：

• 顯示事件類型和所有屬性
• 跟蹤調用了哪個 javascript 方法
• 在事件冒泡的情況下，調用了哪些進一步的方法

為了澄清我的問題：我不知道存在哪些方法處理程序以及它們在哪里定義 - 這就是我想要找出的。

Answer 1

您可以嘗試使用 Firebug + Eventbug擴展來可視化通風口。

有關不同瀏覽器中鍵盤事件的一般概述，請嘗試以下操作： http://unixpapa.com/js/key.html

Answer 2

在 IE 中你可以使用debugger; 關鍵詞。 不確定 x 瀏覽器的友好性：

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>

Answer 3

我不知道為此目的的任何擴展。 但是，您可以為關鍵事件編寫處理程序，然后將適當的 output 打印到 javascript 控制台。 您也可以轉儲跟蹤。 Firebug 具有內置的跟蹤功能： console.trace() 。 您也可以使用js trace關鍵字進行 google 以找到一些跟蹤工具。

這個頁面是處理鍵盤事件的一個很好的例子。