Visualisez vos évènements DOM avec Visual Event

Je suis certain que, lors de vos développements d’interface web et de charte graphique, vous aviez voulu à un moment ou à un autre rapidement lister l’ensemble des évènements Javascript définis sur votre page, pour déboguer ou même pour optimiser ces derniers.

Mieux : vous aimeriez les afficher visuellement sur les éléments du DOM, afin de réellement voir où et pour quels types d’évènements ils sont définis. Et pourquoi pas voir également le code des callbacks associés (soyons fous).

Ne cherchez plus : j’ai trouvé, testé et approuvé pour vous un outil qui fait exactement ça. Il s’appelle Visual Event, il est open-source et se présente sous la forme d’un bookmarklet (et donc, sans installation d’extension navigateur). Ce n’est également pas n’importe qui qui l’a conçu : il s’agit du créateur de DataTables.

Pour l’installer, glissez et déposez le lien affiché sur la page officielle (vers le bas dans la section Install) dans votre barre de marque-pages. Puis allez sur un site, et cliquez simplement sur le marque-page fraîchement créé. Cela injectera un fichier Javascript dans la page courante et affichera un truc de ce style (cela peut prendre du temps s’il y a beaucoup d’éléments à traiter) :

Ça claque non ? Ci-dessus un exemple sur DuckDuckGo où est affiché le détail des évènements de l’icône du menu principal en haut à droite : 4 évènements y sont attachés.

A noter que cela ne fonctionne pas pour les sites protégés par la Content Security Policy.