Pesticide, l'extension qui passe une page aux rayons X
août 2023 Une extension Chrome qui dessine le contour de chaque élément d'une page. Ancienne, minuscule, et toujours dans ma barre d'outils depuis que je code.L'extension
Pesticide ajoute un contour de couleur autour de chaque élément de la page, avec une couleur par type de balise. Un clic pour l'activer, un clic pour la désactiver.
Le projet date de 2013. Il a été créé par Adam Morse (mrmrs), également auteur de Tachyons, l'une des premières bibliothèques de classes utilitaires, bien avant Tailwind. Le code tient dans une feuille de style, à raison d'une règle par balise :
body { outline: 1px solid #2980b9 !important; }
article { outline: 1px solid #3498db !important; }
/* … et ainsi de suite pour toutes les balises */
Le choix d'outline plutôt que border a son importance : un outline n'occupe pas d'espace, la mise en page ne bouge donc pas d'un pixel quand on l'active.
La structure plutôt que le design
Je l'utilise depuis que je développe. Une fois activée, on ne voit plus le design mais la structure de la page.
Sur cette page d'Unsung, le blog de Marcin Wichary, plusieurs détails invisibles apparaissent :
- le guillemet ouvrant du titre sort de son cadre : c'est une ponctuation suspendue, qui garde les lettres alignées sur la colonne
- chaque « / » du menu est un élément à part, tout comme le « + » de « Newsletter + RSS »
- les lignes du header filent jusqu'au bord droit de l'écran, bien au-delà de la colonne de texte
Rien de cassé : ce sont des choix de construction, mais ils ne se voient qu'avec l'extension.
Ce qu'elle permet de repérer
Les débordements, d'abord : un élément plus large que son parent devient évident, comme avec les barres de défilement affichées en permanence. On voit aussi quel élément porte l'espacement quand des marges s'additionnent, les conteneurs imbriqués inutilement, et les alignements approximatifs entre deux colonnes.
Les héritiers
L'idée a été reprise dans de nombreux outils. Storybook, par exemple, propose un module « Outline » directement inspiré de Pesticide, activable avec la touche o.
Avec Tailwind, deux classes suffisent : [&_*]:outline [&_*]:outline-red-500 sur un conteneur entoure tous ses descendants. Le plugin tailwind-debug fait la même chose pour un élément choisi.
Sans l'extension, il reste la règle à ajouter dans les DevTools :
* { outline: 1px solid red !important; }
C'est moins lisible que les couleurs par balise, mais cela fonctionne partout.