Inspecter un élément pour étudier les liaisons d'événement jQuery

Question

Hypothétique: j'ai trouver une page avec un bouton ('#bigButton'), qui lorsqu'il est cliqué provoque un lama ('img#theLlama') pour afficher() à l'aide de jQuery.

Donc, quelque part (par exemple, la Ligne 76) buttons.js:

$('#bigButton').click(function(){
$('img#theLlama').show();
})

Maintenant, disons que j'ai une grande page HTML avec tout un tas de .js fichiers inclus. Je peux cliquer sur un bouton pour voir le lama semble, mais je n'ai aucune idée de l'endroit où le code ci-dessus est.

La solution, je suis à la recherche est très similaire à celle qui est disponible avec le CSS dans Firebug. Je veux inspecter l'élément et l'ont me montrer que ce jQuery se produit dans la Ligne 76 de buttons.js ainsi que tous les autres liaisons sur cet élément.

*Remarque: Le bounty est pour une réponse spécifique à la " lama question,' c'est à dire pointant vers une solution qui est décrit ci-dessus. *

FireQuery est un excellent outil pour jQuery nombreuses tâches, mais il ne semble pas être le lama question. Si je me trompe à ce sujet, veuillez me corriger.

Answer 1

À l'aide de Firebug, FireQuery et ce violon:

Tapant Cmd+Maj+C (Inspecter l'Élément) et en cliquant sur le bouton révèle ceci:

En cliquant sur les événements Object {click= } révèle ce (après une croissance de certaines infos)

Et en cliquant sur l' function() révèle ceci:

Ce qui devrait être le code que vous recherchez, à droite?

Comme une note, Firebug ne pouvez pas toujours trouver la ligne de code exacte quelque chose est venu. J'ai eu cette méthode échoue complètement! Une autre approche consiste à utiliser la fonction nommée expressions. Modifiant le code:

$('#bigButton').click(function showMyLlama(){
  $('img#theLlama').show();
})

Maintenant, révèle ce lors de l'inspection de l' events objet:

Ce qui est bien plus utile que juste function() comme il est maintenant évident que ce gestionnaire nous montre un lama. Vous pouvez également chercher dans le code pour le nom de la fonction et de la trouver!

---

À l'aide de Chrome, ses construit en inspecteur web, et ce violon:

Tapant Cmd+Maj+C (Inspecter l'Élément) et en cliquant sur le bouton affiche ceci:

En cliquant sur le bouton dans les éléments de l'inspecteur, puis en appuyant sur echap pour ouvrir le JS Console:

Dans la Console Chromée, $0 se réfère à l'élément sélectionné dans le panneau eléments.

En tapant $._data( $0 ) de nous donner l'jQuery (interne) de l'objet de données qui inclut des événements, tout comme dans notre Firebug exemple, malheureusement, Chrome wont let us cliquez sur la fonction, mais il va nous permettre de voir la source:

---

Une remarque à propos de .live() événements:

Les Événements en direct sont stockées sur $._data( document, "events" ) et contiennent un origHandler qui pointe à la fonction:

Answer 2

Étant donné l’interface que vous recherchez, je pense que vous voudrez utiliser 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).

Answer 3

FireQuery est le plus pratique, mais si vous avez besoin de le faire manuellement, vous pouvez obtenir une référence à la sur la gestion des fonction avec $(element).data('events').click[0].handler (bien sûr, il n'est pas nécessairement de 0 s'il existe plusieurs gestionnaires de clic). À partir de là, il est à vos favoris débogueur pour localiser cette fonction dans le code. (À l'aide des fonctions nommées aide. Firebug peut parfois recherchez des fonctions anonymes, mais le plus souvent pas. Il va montrer le corps de la fonction, si vous passez dessus avec la souris.)

La mise à jour c'est la façon dont les données sont affichées avec FireQuery:

En mode HTML:

console:

Answer 4

Bien eventbug vous montrera tous les gestionnaires d’événements d’un élément, http://getfirebug.com/releases/eventbug, mais le gestionnaire est souvent du code générique.