JavaScript: как отлаживать события клавиатуры

Question

Представьте себе веб-приложение, в котором используются настраиваемые обработчики событий клавиатуры, которые могут создавать всплывающие события или перехватывать события.
Есть ли способ (например, Firefox / Firebug addon) отладить каждое нажатие клавиши / событие клавиатуры , что-то вроде:

• отображение типа события и всех атрибутов
• отследить, какой метод 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

Я не знаю никаких расширений для этой цели.Но вы можете написать обработчики для ключевых событий, а затем вывести соответствующий вывод в консоль javascript.Также вы можете сбрасывать следы тоже.Firebug имеет встроенную функцию трассировки: console.trace().Вы можете зайти в Google по ключевым словам js trace и найти некоторые инструменты трассировки.

Эта страница является хорошим примером для обработки событий клавиатуры.