web-dev-qa-db-fra.com

Comment déboguer des liaisons d'événement JavaScript / jQuery avec Firebug ou des outils similaires?

Je dois déboguer une application Web qui utilise jQuery pour effectuer des manipulations assez complexes et désordonnées DOM . À un moment donné, certains événements liés à des éléments particuliers ne sont pas déclenchés et cessent tout simplement de fonctionner.

Si j'avais la possibilité de modifier le code source de l'application, j'exploiterais et ajouterais un tas d'instructions Firebugconsole.log() et de commentaires/décommenter du code pour tenter de cerner le problème. Mais supposons que je ne puisse pas éditer le code de l’application et que j’ai besoin de travailler entièrement dans Firefox avec Firebug ou des outils similaires.

Firebug est très efficace pour me permettre de naviguer et de manipuler le DOM. Jusqu'à présent, cependant, je n'ai pas été capable de comprendre comment faire du débogage d'événement avec Firebug. Plus précisément, je souhaite simplement voir une liste de gestionnaires d’événements liés à un élément particulier à un moment donné (en utilisant les points d’arrêt Firebug JavaScript pour suivre les modifications). Mais soit Firebug n’a pas la capacité de voir les événements liés, soit je suis trop bête pour le trouver. :-)

Des recommandations ou des idées? Idéalement, j'aimerais simplement voir et éditer des événements liés à des éléments, de la même manière que je peux éditer le DOM aujourd'hui.

javascriptjqueryjavascript-eventsevent-handlingfirebug
601
Jaanus

Voir Comment trouver des écouteurs d'événement sur un nœud DOM .

En un mot, en supposant qu’à un moment donné un gestionnaire d’événements soit attaché à votre élément (par exemple): $('#foo').click(function() { console.log('clicked!') });

Vous l'inspectez comme ça:

  • jQuery 1.3.x

    _var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
  console.log(value) // prints "function() { console.log('clicked!') }"
})
_

  • jQuery 1.4.x

    _var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})
_

Voir jQuery.fn.data (où jQuery stocke votre gestionnaire en interne).

  • jQuery 1.8.x

    _var clickEvents = $._data($('#foo')[0], "events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})
_
353
Crescent Fresh

Il existe un joli bookmarklet appelé Visual Event qui peut vous montrer tous les événements attachés à un élément. Il est doté de couleurs surlignées pour différents types d’événements (souris, clavier, etc.). Lorsque vous les survolez, le corps du gestionnaire d'événements, son mode de rattachement, ainsi que le numéro de fichier/ligne (sur WebKit et Opera) sont affichés. Vous pouvez également déclencher l'événement manuellement.

Il ne peut pas trouver tous les événements car il n'existe aucun moyen standard de rechercher les gestionnaires d'événements associés à un élément, mais cela fonctionne avec les bibliothèques populaires telles que jQuery, Prototype, MooTools, YUI, etc.

162
Matthew Crumley

L'extension Eventbug a été publiée hier, voir: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

73
Jan Odvarko

Vous pouvez utiliser FireQuery . Il montre tous les événements attachés aux éléments DOM dans l'onglet HTML de Firebug. Il montre également toutes les données attachées aux éléments via $.data.

41
Shrikant Sharat

Voici un plugin qui peut lister tous les gestionnaires d’événements pour un élément/événement donné:

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Utilisez-le comme ceci:

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Src: (mon blog) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

26
James

La console de développement WebKit (disponible dans Chrome, Safari, etc.) vous permet d'afficher les événements attachés aux éléments.

Plus de détails dans cette question de débordement de pile

23
Cristian Sanchez

Utilisez $._data(htmlElement, "events") dans jquery 1.7+;

ex:

$._data(document, "events") ou $._data($('.class_name').get(0), "events")

11
Tamás Pap

Comme un collègue l’a suggéré, console.log> alert:

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})
8
Flevour

jQuery stocke les événements dans les éléments suivants:

$("a#somefoo").data("events")

Faire une console.log($("a#somefoo").data("events")) devrait lister les événements attachés à cet élément.

6
Alex Heyd

Utilisation de DevTools dans le dernier Chrome (v29) Ces deux conseils sont très utiles pour le débogage d'événements:

  1. Liste des événements jQuery du dernier élément DOM sélectionné

    • Inspecter un élément sur la page
    • tapez ce qui suit dans la console:

      $ ._ data ( $ , "événements") // en supposant que jQuery 1.7+

    • Il listera tous les objets d’événement jQuery qui lui sont associés, développera l’événement concerné, fera un clic droit sur la fonction de la propriété "handler" et choisira "Afficher la définition de la fonction". Il ouvrira le fichier contenant la fonction spécifiée.

  2. Utilisation de la commande monitorEvents ()

5
mateuscb

J'ai aussi trouvé débogueur jQuery dans le magasin chrome. Vous pouvez cliquer sur un objet dom qui affichera tous les événements qui lui sont liés ainsi que la fonction de rappel. Je déboguais une application où les événements n'étaient pas supprimés correctement et cela m'aidait à la localiser en quelques minutes. Évidemment, ceci est pour chrome bien que, pas firefox.

4
Rob

On dirait que l'équipage FireBug travaille sur une extension EventBug. Cela ajoutera un autre panneau à FireBug - Events.

"Le panneau des événements répertorie tous les gestionnaires d’événements de la page, groupés par type d’événement. Pour chaque type d’événement, ouvrez-le pour afficher les éléments auxquels les écouteurs sont liés et un résumé de la source de la fonction." EventBug Rising

Bien qu'ils ne puissent pas dire pour le moment quand il sera publié.

4
jayarjo

Icône ev à côté d'éléments

Dans le panneau de l'inspecteur des outils de développement de Firefox, tous les événements liés à un élément sont répertoriés.

Sélectionnez d'abord un élément avec Ctrl + Shift + C, par exemple. Flèche upvote de Stack Overflow.

Cliquez sur l'icône ev à droite de l'élément pour ouvrir une boîte de dialogue:

events tooltip

Cliquez sur le symbole de signe de pause || de l'événement que vous souhaitez, ce qui ouvre le débogueur sur la ligne du gestionnaire.

Vous pouvez maintenant placer un point d'arrêt comme d'habitude dans le débogueur, en cliquant sur la marge de gauche de la ligne.

Ceci est mentionné à: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Malheureusement, je ne pouvais pas trouver un moyen pour que cela fonctionne bien avec prettyfication, il semble juste que s'ouvre à la ligne minifiée: Comment embellir Javascript et CSS dans Firefox/Firebug?

Testé sur Firefox 42.

4
Ciro Santilli 新疆改造中心996ICU六四事件

Selon ce fil , Firebug n’a aucun moyen de voir quels événements sont attachés aux auditeurs sur un élément DOM.

Il semble que le mieux que vous puissiez faire est soit ce que suggère tj111, soit vous pouvez cliquer avec le bouton droit de la souris sur l'élément dans la visionneuse HTML, puis cliquer sur "Journaliser les événements" afin de voir quels événements sont déclenchés pour un élément DOM particulier. Je suppose qu'on pourrait le faire pour voir quels événements pourraient déclencher des fonctions particulières.

3
Daniel Lew

Avec la version 2.0, Firebug a introduit un Événements panneau , qui répertorie tous les événements de l'élément sélectionné dans le HTML panneau .

*Events* side panel in Firebug

Il peut également afficher les écouteurs d’événements encapsulés dans les liaisons d’événements jQuery au cas où l’option Afficher les écouteurs encapsulés est cochée et accessible via le panneau Événements du panneau. menu .

Avec ce panneau, le workflow pour déboguer un gestionnaire d’événements est le suivant:

  1. Sélectionnez l'élément avec l'écouteur d'événement que vous souhaitez déboguer
  2. Dans le panneau latéral Événements, cliquez avec le bouton droit de la souris sur la fonction située sous l'événement associé et choisissez Définir le point d'arrêt.
  3. Déclencher l'événement

=> L'exécution du script s'arrête à la première ligne de la fonction de gestionnaire d'événements et vous pouvez la déboguer par étape.

2
Sebastian Zartner

Firebug 2 intègre maintenant le débogage/inspection des événements DOM.

0
MRalwasser