Débugger les événements js avec firebugUJS
Avec le retour en force de javascript, la quête des “bonne pratiques” a trouvé un nouveau lieu d’investigation. Elle y a pris un nom : UJS (unobstrusive javascript).
Cette tendance conseille de faire une distinction nette entre le javascript et le HTML (comme on distingue le CSS du HTML) et de ne voir en javascript qu’un “bonus”, ne perturbant pas l’utilisation du site si javascript venait à être désactivé par le navigateur.
Concrètement, cela passe par un développement de l’application excluant javascript, puis par l’implémentation d’une surcouche comportementale (animations, événements) dans un fichier javascript externe.
Il est donc exclu d’inclure de larges portions de javascript dans une balise script du HTML ou de définir dans les balises des attributs d’événements, comme onclick ou onmouseover.
Le problème
Si je veux exécuter la fonction name_clicked() lorsque je clique sur le li avec la classe name, je ferai ainsi avec jQuery :
$( 'li.name' ).click( function(){ name_clicked(); });
Le problème ici est que je ne disposerai d’aucun moyen pour savoir si l’événement à bien été attaché à un li en particulier. Si je clique sur le li et que rien ne se passe, est-ce un problème avec name_clicked() ou avec l’événement? Le seul moyen que j’ai de vérifier est de parsemer mon code de alert() ou de console.log(), ce qui est généralement la solution de dernier recours.
La solution
Ryan Taylor a publié au début du mois une extension pour firebug qui permet de lister les événements ajoutés à un élément du DOM : firebugUJS.
Son fonctionnement est simple : vous inspectez un élément comme d’habitude et vous choisissez dans la fenêtre de l’inspecteur de styles du menu HTML l’onglet Events. Le code du callback de l’événement y est alors présenté.
Limitations
L’extension est encore à ses débuts de développement. Elle ne supporte pour l’instant principalement que jQuery et LowPro (un effort pour rendre Prototype moins obstrusif).
Après une semaine d’essai, j’en suis relativement satisfait (relativement, parce que c’est donc un début et que je passe les problèmes pour cette raison). Cette extension m’a déjà permis de gagner du temps, mais il y a encore quelques petites choses à corriger. En particulier, les événements n’apparaissent parfois pas (il faut recharger la page une seconde fois), une quantité importante d’informations plus utiles au développeur de l’extension qu’à moi apparaissent dans la partie console de firebug (ce qui est tout à fait excusable) et surtout : il m’est déjà arrivé deux fois de devoir désactiver l’extension parce qu’elle faisait planter une application qui utilisait lourdement javascript (piwik la première fois, l’ajout d’image dans wordpress la seconde fois).
Malgré cela, je continue d’utiliser cette extension car je fais un usage intensif des événements js et qu’elle m’a déjà permis de gagner beaucoup de temps. Si ce n’est pas votre cas, vous voudrez probablement attendre une version plus stable.
Une affaire à suivre, donc :)