Les extensions Chrome que la plupart des développeurs web finissent par garder se rangent en cinq familles : les devtools des frameworks (React, Vue, Angular, Redux), les vérificateurs d’accessibilité (axe DevTools, WAVE), les inspecteurs de page (Web Developer, WhatFont, ColorZilla, Wappalyzer), un outil d’affichage mobile et quelques utilitaires. N’installez que ce que vous utilisez chaque semaine : chaque extension demande des autorisations et peut ralentir le navigateur. La liste ci-dessous explique ce que chacune apporte que Chrome DevTools ne fait pas déjà.
Précision : nous éditons Mobile View Extension, qui figure dans la partie mobile. Les autres extensions sont développées par d’autres équipes et sont citées parce qu’elles comblent un vrai manque.
Ce que Chrome DevTools fait déjà
Avant d’ajouter quoi que ce soit, mieux vaut savoir ce qui est intégré. Chrome DevTools propose l’inspection des éléments et du CSS, un débogueur JavaScript, l’enregistrement du réseau et des performances, l’émulation d’appareils mobiles (guide), la modification du user agent (guide), les audits Lighthouse (guide), une pipette et un contrôle du contraste dans le volet Styles, ainsi que CSS Overview. Beaucoup d’anciennes extensions « pour développeur web » font doublon avec ces fonctions. Le tour des panneaux intégrés se trouve dans notre guide Chrome DevTools.
Devtools des frameworks
| Extension | Éditeur | Ce qu’elle ajoute |
|---|---|---|
| React Developer Tools | Meta (équipe React) | Panneaux Components et Profiler : props, state et hooks, repérage des rendus lents |
| Vue.js devtools | Équipe Vue | Arbre des composants, état Pinia, routeur et timeline pour les applications Vue |
| Angular DevTools | Équipe Angular | Explorateur de composants et profileur de la détection des changements |
| Redux DevTools | Mainteneurs de Redux | Journal des actions, diff d’état et débogage « time travel » pour Redux et les stores compatibles |
Installez celle de votre framework. Elles ne s’activent que sur les pages qui l’utilisent.
Vérificateurs d’accessibilité
axe DevTools (Deque) ajoute un panneau DevTools qui analyse la page à la recherche de problèmes WCAG : libellés manquants, contraste insuffisant, erreurs ARIA. Chaque problème est expliqué, avec un lien vers la règle concernée. La version gratuite couvre les analyses automatiques.
WAVE (WebAIM) affiche des icônes directement sur la page pour montrer où se trouvent les erreurs, les alertes et les éléments de structure. Il est particulièrement pratique pour expliquer les problèmes aux designers et aux rédacteurs.
Les outils automatiques ne détectent qu’une partie des problèmes d’accessibilité. Complétez-les par une navigation au clavier et un test avec un lecteur d’écran.
Inspecteurs de page
Web Developer (Chris Pederick) est une barre d’outils historique qui regroupe des centaines de petites fonctions : désactiver le CSS ou le JavaScript, entourer les éléments, afficher les textes alternatifs des images, consulter le détail des formulaires, etc. Une bonne partie existe quelque part dans DevTools, mais la barre les met à portée de clic.
WhatFont identifie la police du texte survolé, y compris la police de secours réellement utilisée.
ColorZilla ajoute une pipette pour prélever une couleur n’importe où sur la page, avec un historique des couleurs et un générateur de dégradés.
Wappalyzer indique les technologies d’un site : CMS, frameworks, outils d’analyse, hébergement. Utile pour étudier la concurrence ou comprendre la stack d’un client avant un projet.
Affichage mobile et tests responsive
Le mode appareil de DevTools est puissant, mais il faut plusieurs manipulations par onglet et il occupe une grande partie de l’écran. Si vous vérifiez des mises en page mobiles plusieurs fois par jour, une extension dédiée fait gagner du temps.
Mobile View Extension recharge l’onglet courant dans un cadre de téléphone ou de tablette, avec le user agent, les client hints, la taille d’écran et la densité de pixels propres à l’appareil choisi. Vous sélectionnez un modèle Apple ou Android, ou saisissez une résolution personnalisée, passez en paysage et enregistrez une capture PNG de la vue encadrée. L’extension fonctionne sur localhost, reste active pendant la navigation et ne collecte aucune donnée de navigation. Ses limites sont celles de la plupart des aperçus dans le navigateur : on interagit à la souris, sans événements tactiles, et certaines media queries comme hover et pointer ne sont pas entièrement émulées. Une comparaison détaillée se trouve dans simulateur mobile en extension ou DevTools.
Utilitaires
Une extension visionneuse JSON affiche les réponses JSON brutes sous forme d’arbre repliable quand vous ouvrez une URL d’API. Par défaut, Chrome les montre en texte brut.
Un user agent switcher est utile si vous testez souvent la détection d’appareil ou du code propre à un navigateur. Lisez d’abord à quoi sert un user agent switcher : pour les mises en page mobiles, un outil d’affichage mobile convient mieux.
Comment savoir si une extension est sûre
Les extensions pour développeurs demandent souvent l’accès à tous les sites, ce qui leur permet de lire et de modifier toutes les pages ouvertes, y compris vos interfaces d’administration et votre messagerie. Avant d’installer :
- Vérifiez l’éditeur. Les devtools d’un framework doivent venir de l’équipe du framework.
- Lisez les autorisations sur la fiche du Chrome Web Store. Un identificateur de polices n’a pas besoin d’accéder à vos téléchargements.
- Lisez la politique de confidentialité. Elle doit dire ce qui est collecté. « Rien » est la bonne réponse pour la plupart des outils de développement.
- Regardez la date de dernière mise à jour. Une extension abandonnée casse avec les mises à jour de Chrome et ne reçoit plus de correctifs de sécurité.
- Surveillez les changements de propriétaire. Des extensions populaires sont parfois revendues et se mettent à injecter de la publicité. Si le comportement d’une extension change brusquement, supprimez-la.
Créez un profil Chrome dédié au développement si vous voulez séparer ces extensions de votre navigation personnelle.
Un kit de départ minimal
Sur une nouvelle machine, commencez par :
- les devtools de votre framework ;
- axe DevTools ou WAVE ;
- une extension d’affichage mobile ;
- WhatFont ou ColorZilla si vous travaillez de près avec le design.
N’ajoutez les autres que lorsque vous vous surprenez à répéter une tâche que l’une d’elles réglerait.
Questions fréquentes
Quelle est l’extension Chrome la plus utile pour un développeur web ?
Les devtools du framework que vous utilisez, car rien dans Chrome ne les remplace. Ensuite, un vérificateur d’accessibilité et un outil d’affichage mobile sont ce qui rapporte le plus à la plupart des développeurs front-end.
Les extensions Chrome ralentissent-elles le navigateur ?
Chaque extension consomme de la mémoire et peut exécuter des scripts sur chaque page. Quelques extensions bien conçues n’ont presque pas d’effet ; plusieurs dizaines peuvent ralentir le chargement des pages et DevTools. Désactivez celles que vous n’utilisez pas.
Lighthouse est-il une extension ?
Lighthouse est intégré à Chrome DevTools sous forme de panneau. Une extension Lighthouse séparée existe aussi, mais on le lance généralement depuis DevTools.