javascript: Come eseguire il debug degli eventi della tastiera

Question

Immaginate un'applicazione web che utilizzi gestori di eventi personalizzati per la tastiera che potrebbero generare eventi che ribollono o che catturano eventi.
C'è un modo (ad esempio Firefox/Firebug addon) per di debug ogni evento tasto/tastiera, qualcosa di simile:

• visualizzazione del tipo di evento e tutti gli attributi
• traccia che javascript metodo era stato chiamato
• in caso di spumeggiante evento che ulteriori metodi sono stati chiamati

Per chiarire la mia domanda: non so che esistono metodi gestori e dove sono definiti - questo è quello che sto cercando di scoprire.

Answer 1

Non conosco alcuna estensione per questo scopo. Tuttavia, puoi scrivere gestori per eventi chiave e quindi stampare l'output appropriato sulla console javascript. Inoltre puoi scaricare anche tracce. Firebug ha funzionalità di traccia incorporata: console.trace(). Puoi google con le parole chiave js trace per trovare anche alcuni strumenti di traccia.

This page è un buon esempio per gestire eventi di tastiera.

Answer 2

Si potrebbe provare a visualizzare le prese d'aria con l'estensione Firebug + Eventbug.

Per una panoramica generale sugli eventi di tastiera in diversi browser, provate questo: http://unixpapa.com/js/key.html

Answer 3

In IE è possibile utilizzare la parola chiave debugger;. Non è sicuro circa la cordialità x browser:

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

Nel contesto della sfida:

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

Trovo che questa sia la tecnica di debug più efficace, ma poi ho spendere un sacco di tempo in IE. Molte persone sono a loro agio con Firebug, ma lo trovo molto scomodo e molto meno intuitivo rispetto al debugger di IE. Il debugger di IE offre una valutazione più semplice degli orologi e delle espressioni e fornisce anche tooltip interattivi basati sulla riflessione (come il debugger VS).

Inoltre, per la tua domanda "tracciare come è stato chiamato il metodo" - lo stack di chiamate è molto reattivo e facile da seguire indietro/su.

UPDATE:

Ecco uno script di immettere sul fondo di ogni pagina per intrappolare ed eseguire il debug di eventi, in 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>