javascript: Cách gỡ lỗi sự kiện bàn phím

Question

Hãy tưởng tượng ứng dụng web sử dụng trình xử lý sự kiện bàn phím tùy chỉnh có thể làm bong bóng sự kiện - hoặc bắt sự kiện.
Có cách nào (ví dụ như Firefox/Firebug addon) để debug mỗi sự kiện tổ hợp phím/bàn phím, một cái gì đó như:

• hiển thị loại sự kiện và tất cả các thuộc tính
• dấu vết mà javascript phương pháp đã được gọi
• trong trường hợp sự kiện bọt mà phương pháp hơn nữa đã được gọi

Để làm rõ câu hỏi của tôi: tôi không biết được phương pháp xử lý tồn tại và nơi chúng được định nghĩa - đây là những gì tôi đang cố gắng tìm hiểu.

Answer 1

Tôi không biết bất kỳ tiện ích mở rộng nào cho mục đích này. Tuy nhiên, bạn có thể viết trình xử lý cho các sự kiện quan trọng và sau đó in đầu ra thích hợp cho bảng điều khiển javascript. Ngoài ra bạn có thể đổ dấu vết quá. Firebug có chức năng theo dõi tích hợp: console.trace(). Bạn có thể google với js trace từ khóa để tìm một số công cụ theo dõi.

This page là một ví dụ tốt để xử lý các sự kiện bàn phím.

Answer 2

Bạn có thể thử hình dung lỗ thông hơi bằng phần mở rộng Firebug + Eventbug.

Để có cái nhìn tổng thể về các sự kiện bàn phím trong các trình duyệt khác nhau, hãy thử này: http://unixpapa.com/js/key.html

Answer 3

Trong IE bạn có thể sử dụng từ khóa debugger;. Không chắc chắn về sự thân thiện x-trình duyệt:

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

Trong bối cảnh thách thức của bạn:

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

Tôi tìm thấy điều này được các kỹ thuật gỡ lỗi hiệu quả nhất, nhưng sau đó một lần nữa tôi dành rất nhiều thời gian trong IE. Nhiều người rất hài lòng với Firebug nhưng tôi thấy nó cồng kềnh và kém trực quan hơn trình gỡ rối của IE. Trình gỡ rối của IE cung cấp cho việc đánh giá biểu thức và đồng hồ dễ dàng hơn, đồng thời cũng cung cấp các chú giải dựa trên phản chiếu tương tác (như trình gỡ lỗi VS).

Ngoài ra, mỗi câu hỏi của bạn "theo dõi phương thức nào được gọi là" - ngăn xếp cuộc gọi rất nhạy và dễ theo dõi lại.

UPDATE:

Dưới đây là một kịch bản để đặt trên dưới cùng của mỗi trang để bẫy và gỡ lỗi các sự kiện, trong 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>