Nouveautés Chrome DevTools novembre 2026 : l’IA inspecte le CSS en live
Les versions 155 et 156 de Chrome débarquent avec une salve d’améliorations dans DevTools qui vont clairement changer la donne pour quiconque code des interfaces web. Que tu construises un site inspiré de tes univers pop culture préférés ou une appli plus sérieuse, ces outils rendent le débogage moins hasardeux. L’IA gagne enfin une vraie vision du rendu, le positionnement des éléments s’édite à la souris, et les diagnostics se précisent. Voici ce qui mérite vraiment ton attention.
Les agents IA inspectent tes styles CSS en direct
Le serveur MCP de Chrome DevTools, disponible en preview depuis septembre 2025, permet désormais aux agents de coding de ne plus travailler à l’aveugle. L’outil get_css_styles leur donne accès aux styles calculés et aux règles réellement appliquées, avec un système de pagination (pageSize et pageIdx) pour ne pas exploser les contextes des modèles. Ils voient les règles héritées, les pseudo-éléments, les animations via @keyframes ainsi que les at-rules comme @position-try, @property ou @function. Un fichier de configuration dédié gère les flags, les racines de fichiers personnalisées, et le CLI active par défaut –allow-unrestricted-paths. Les gros enregistrements de performance se parsent par morceaux avec un buffer de 1,2 Go, chaque instance étant isolée pour éviter les fuites. Les dialogues JavaScript déclenchés pendant les actions sont gérés automatiquement, et l’historique de la console survit aux navigations dans le même document. Un simple clic dans le menu principal ouvre les instructions d’installation. Résultat : l’IA propose des corrections basées sur le cascade réel du navigateur, pas seulement sur le code source. Un vrai soulagement quand un layout refuse de se tenir.
L’éditeur visuel position-area : le CSS d’ancrage devient enfin intuitif
Le positionnement par ancrage CSS, lancé en 2024 et désormais Baseline en 2026 avec un support large (Chrome, Safari 26, Firefox 147), permet d’attacher tooltips, menus ou popovers à un élément sans une ligne de JavaScript. La propriété position-area s’appuie sur une grille 3×3 autour de l’ancre. Dans l’onglet Styles, un swatch à côté de la déclaration ouvre un sélecteur visuel : tu cliques les régions, tu ajustes les axes ensemble ou séparément, tu actives le mot-clé self et tu laisses DevTools raccourcir les valeurs. Pour un popover avec plusieurs ancres implicites, un clic droit sur l’adorner dans l’arbre DOM te permet de choisir et de sauter vers n’importe laquelle. L’overlay affiche directement les boîtes de l’IMCB (inset-modified containing block). L’éditeur Flexbox gère désormais wrap-reverse, les règles @starting-style inactives restent visibles avec leur état d’expansion conservé, et les custom properties commençant par trois tirets ou plus s’éditent sans souci. L’autocomplétion des classes ignore celles déjà présentes. Ces outils transforment une spec parfois abstraite en quelque chose d’aussi simple qu’un inspecteur graphique. Fini les allers-retours entre MDN et le navigateur pour placer un élément au bon endroit.
Diagnostics Web Install, fuites mémoire et fluidité au quotidien
Le panneau Application et la tiroir Issues signalent désormais les erreurs de manifeste Web Install (navigator.install et l’élément install) : échecs de fetch, problèmes de syntaxe, start\_url invalides, noms ou IDs manquants, avec des liens directs vers le fichier concerné. Une nouvelle colonne Ad provenance indique si un script publicitaire correspond à une chaîne d’ancêtres ou à une règle de liste, accompagnée de tooltips explicatifs. Les grilles IndexedDB s’adaptent dynamiquement en hauteur tout en conservant le scroll, et les cookies se suppriment au clavier ou via le menu contextuel. Dans Network, un avertissement apparaît si des Early Hints de preload sont ignorés à cause du cache désactivé. Les overrides de corps de réponse et les colonnes d’en-têtes personnalisées persistent entre les rechargements, et tu peux copier les payloads bruts tronqués. Le panneau Memory repère les variables de contexte mortes dans les snapshots heap en analysant les métadonnées V8 : il met en évidence celles retenues par des closures sœurs sans être utilisées, triées par impact mémoire. La timeline Performance se zoome, se panne et se déplace sans accroc, et l’état des onglets Call tree et Bottom-up (nœuds ouverts, sélection, position de scroll) survit aux changements de panneau. Ailleurs, Sensors permet d’overrider navigator.cpuPerformance, Device Mode mémorise tes préférences par appareil, le Color Picker suggère des contrastes APCA et convertit vers oklab/oklch sans valeurs invalides, tandis que l’accessibilité gagne des indicateurs non colorés et une meilleure navigation clavier. Ces ajustements rendent l’ensemble plus solide, que tu chasses une fuite, tu débogues une PWA ou tu peaufines une interface.
