Javascript : un debug plus facile avec le blackboxing

Comme beaucoup de développeurs web avant le boom des frameworks front-end, mon utilisation de Javascript se limitait à envoyer des requêtes en Ajax et injecter leur résultat dynamiquement dans des pages, à modifier le DOM et à utiliser quelques plugins ou librairies. Même si j'avais entendu parler des SPA et des nouveaux frameworks Javascript, je n'avais jamais encore eu l'occasion de vraiment les utiliser ou d'écrire une application entière avec ces technos. Les outils de debug du monde JS m'étaient donc quasiment inconnus il y a encore 3 ans. Rapidement après avoir intégré l'équipe Altagem, et pour pouvoir travailler efficacement au quotidien sur une application AngularJS conséquente (environ 20.000 LOC sans compter les specs), je m'y suis mis avec bonheur : j'ai tout d'abord découvert debugger, et depuis, finis le debug "artisanal" avec console.log, et à moi les joies de step in, step over et autres !

Mais (car il y a un mais), lorsque je devais procéder à un debug pas-à-pas, je me suis souvent retrouvé confronté au problème posé par les librairies tierces : effectivement, lorsqu'on lance un debug pas-à-pas, le debugger passe dans tous les fichiers et toutes les portions de code de la pile d'appel, y compris ceux qui appartiennent à des librairies tierces (au choix: jQuery, AngularJS, emberJS, lodash, momentjs..). Or, la majorité du temps, il nous est totalement inutile de débugger ces fichiers là, et passer dans ces fichiers ne fait que ralentir notre process de debug. Heureusement, les navigateurs majeurs ont apporté une solution à ce problème avec le "blackboxing de scripts".

En quoi ça consiste ? Tout simplement, vous indiquez à votre debugger certains scripts ou répertoires qu'il doit considérer comme des boîtes noires. Lors d'une session de debug, il ignorera totalement ces scripts et votre pas-à-pas passera outre les portions de code contenues dans ces fichiers.

Comment ça se configure ?

D'une façon générale, vous indiquez à votre navigateur quels fichiers ignorer, au cas par cas. Selon les navigateurs, il est aussi possible de définir des pattern de fichiers qui seront toujours ignorés, pour tous les projets sur lesquels vous travaillez.

Dans Firefox

Firefox a été le premier a implémenter cette fonctionnalité, et fournit deux options différentes de définir les scripts blackboxés:

Méthode 1 : script par script

Il suffit de se rendre dans l'onget "Débogueur", de sélectionner un des scripts de la page, et de cliquer sur l'icône en forme d'oeil en bas: à partir de là, ce script est blackboxé. Si vous essayez d'afficher son contenu, vous avez un message vous indiquant qu'il est blackboxé, et son nom est légèrement grisé dans la liste des sources.

Firefox - Blackbox a script

À noter l'option "Mettre automatiquement dans une boîte noire les scripts compactés", qui peut être utile (selon votre configuration, mais globalement on débugge en local, et les scripts minifiés localement sont souvent des ressources tierces).

Firefox - Automatically blackbox minified scripts

Méthode 2 : en ligne de commande avec la "developer toolbar"

Firefox fournit une autre façon de configurer cela, via la "developer toolbar" (dont je viens de découvrir l'existence en rédigeant cet article). Il suffit pour cela d'afficher cette ligne de commande via "Shift+F2" ou en sélectionnant "Barre de développement" dans le menu "Outils > développement web". La barre s'affiche et vous pouvez alors y utiliser la commande dbg blacbkox pour saisir des patterns à blackboxer (on est d'accord, c'est la version geek 🙃 )

Firefox - Developer toolbar dbg blackbox

Dans Chrome, Opera

Dans Chrome et les autres navigateurs utilisant Webkit / Blink, la configuration se fait de façon centralisée, en définissant des patterns blackboxés pour tous les sites que vous debuggerez. Pour cela, il faut donc simplement vous rendre dans la partie "Settings > Blackboxing", et ajouter une liste de patterns que vous souhaitez blackboxer. Et voilà !

Chrome - Blackbox settings

Que se passe-t-il quand une source est blackboxée ?

Tout ça c'est bien beau, vous avez blackboxé des scripts mais… so what ? Hé bien désormais, lorsque vous serez dans une session de debug:

  • Les scripts blackboxés sont cachés dans la pile d'appels, ce qui vous permet d'identifier plus rapidement les éléments de votre code qui entrent en jeu.
  • Si vous debuggez en mode pas à pas, vous ne passerez plus dans les scripts blackboxés… Finis donc les pas-à-pas interminables qui vous emmènent dans les tréfonds du code de AngularJS ou jQuery !
  • Les éventuels points d'arrêt présents dans ces fichiers seront ignorés.
  • Si vous utilisez l'option "Pause on exceptions", alors le debugger ne s'arrêtera pas si l'exception est lancée par un script blacbkboxé, et attendra que l'exception remonte (éventuellement) dans un script non blackboxé.

J'espère que cette astuce vous permettra des sessions de debug moins pénibles et plus efficaces ! À noter que je n'ai pas trouvé d'option pour blackboxer des scripts dans Safari.. si jamais vous savez si/comment on peut faire ça, ça m'intéresse, n'hésitez pas à laisser un commentaire.


Sources