Inspecter un élément pour étudier les liaisons d'événements jQuery
Hypothétique: je trouve une page avec un bouton ('#bigButton') qui, lorsque vous cliquez dessus, fait apparaître un lama ('img # theLlama') () à l'aide de jQuery.
Donc, quelque part (disons, ligne 76) dans buttons.js:
$('#bigButton').click(function(){
$('img#theLlama').show();
})
Maintenant, disons que j'ai une grande page HTML avec tout un tas de fichiers .js inclus. Je peux cliquer sur le bouton et voir apparaître le lama, mais je ne sais pas où se trouve le code ci-dessus.
La solution que je recherche est très similaire à celle qui est disponible avec CSS dans Firebug. Je veux inspecter l'élément et le faire me montrer que cette jQuery se produit dans la ligne 76 de buttons.js, avec toutes les autres liaisons sur cet élément.
* Remarque: la prime est pour une réponse spécifique à la "question du lama", c'est-à-dire pour pointer vers la solution décrite ci-dessus. *
FireQuery est un excellent outil pour de nombreuses tâches jQuery, mais il ne semble pas répondre à la question des lama. Si je me trompe, corrigez-moi.
Utilisation de Firebug , FireQuery et ce violon :
Frapper Cmd + Maj + C (Inspecter l'élément) et cliquer sur le bouton révèle ceci: 
Cliquer sur les événements Object {click= } Le révèle (après avoir développé quelques informations)
Et cliquer sur la function() révèle ceci:
Quel devrait être le code que vous recherchez, non?
À noter, Firebug ne peut pas toujours trouver la ligne exacte de code d'où provient. J'ai vu cette méthode échouer complètement! Une autre approche consiste à utiliser des expressions de fonction nommées. Changer le code en:
$('#bigButton').click(function showMyLlama(){
$('img#theLlama').show();
})
Le révèle maintenant lors de l'inspection de l'objet events:
Ce qui est bien plus utile que simplement function() car il est maintenant évident que ce gestionnaire nous montre un lama. Vous pouvez également maintenant rechercher le code pour le nom de la fonction et le trouver!
En utilisant Chrome , son inspecteur Web intégré et ce violon :
Frapper Cmd + Maj + C (Inspecter l'élément) et cliquer sur le bouton montre ceci:
En cliquant sur le bouton dans l'inspecteur d'éléments puis en appuyant sur Echap pour ouvrir la console JS: 
Dans la console Chrome Console, $0 Fait référence à l'élément sélectionné dans le panneau des éléments.
Taper $._data( $0 ) nous donnera l'objet de données jQuery (interne) qui inclut des événements, tout comme dans notre exemple Firebug, malheureusement, Chrome ne nous laisserons pas cliquer sur la fonction, mais cela nous permettra de voir la source:
<Broken Screenshot link>
Une note sur les événements .live() :
Les événements en direct sont stockés sur $._data( document, "events" ) et contiennent un origHandler qui pointe vers la fonction:
<Broken screenshot link>
Étant donné l'interface que vous recherchez, je pense que vous voudrez FireQuery: http://firequery.binaryage.com/
C'est un addon Firebug spécifiquement pour des domaines comme celui-ci (un addon spécifique à jQuery, fort en données/événements).
FireQuery est le plus pratique, mais si vous devez le faire manuellement, vous pouvez obtenir une référence à la fonction de gestion des clics avec $(element).data('events').click[0].handler (bien sûr, ce n'est pas nécessairement 0 s'il y a plusieurs gestionnaires de clics). De là, c'est à votre débogueur préféré de localiser cette fonction dans le code. (L'utilisation de fonctions nommées aide. Firebug peut parfois localiser des fonctions anonymes, mais le plus souvent non. Il montrera le corps de la fonction, si vous survolez avec la souris.)
pdate voici comment les données sont affichées avec FireQuery:
Vue HTML:
console:
Eh bien, eventbug vous montrera tous les gestionnaires d'événements pour un élément, http://getfirebug.com/releases/eventbug mais souvent le gestionnaire est un code générique.