Nouveautés des outils pour les développeurs (Chrome 152)

Matthias Rohmer

Publié le 25 août 2026

Chrome 152 apporte des améliorations significatives au débogage réseau avec le renvoi des requêtes et l'inspection des charges utiles binaires, les ornements d'éléments personnalisés et l'imbrication CSS améliorée dans "Éléments", les métriques Core Web Vitals pour les navigations douces dans "Métriques en direct" de "Performances", l'exportation de tableaux structurés dans la console et des améliorations pour le serveur MCP des outils pour les développeurs.

Outils de développement pour les agents

La dernière version v1.7.0 du serveur MCP des outils pour les développeurs Chrome développe les capacités de débogage de la mémoire précédemment introduites pour les agents de codage tels qu'Antigravity, Claude, Codex et d'autres :

• Détails de l'objet d'instantané de segment de mémoire (get_heapsnapshot_object_details) : inspectez en détail les propriétés des objets JavaScript, les noms de classe et les chemins de rétention de la racine de récupération de mémoire directement à partir des instantanés de segment de mémoire.
• Filtrage du contexte V8 natif : filtrez les objets d'instantané de segment de mémoire par contexte d'exécution natif et inspectez les contextes natifs dans les récapitulatifs d'instantané.
• Améliorations de la stabilité et du cycle de vie des daemons : ajout de la conservation limitée des requêtes réseau par navigation, de la validation de l'ID de session, d'avertissements en cas d'incompatibilité de version entre le CLI et le daemon, et d'un arrêt progressif des workers lors de la suppression du contexte.

Pour en savoir plus et vous lancer, consultez le dépôt DevTools for agents sur GitHub.

Réseau : modifier et renvoyer des requêtes, précharger des insights et décoder des charges utiles binaires

• Renvoyer les requêtes Fetch et XHR : l'ancienne option de menu contextuel "Relancer XHR" s'appelle désormais Renvoyer. Il est désormais compatible avec toutes les requêtes réseau récupérables, en convertissant les requêtes standards en appels fetch() tout en préservant la fidélité de la relecture complète aux côtés de XHR. Les requêtes suivent et affichent également leur contexte d'exécution et l'origine de la console.
• Colonne "Préchargé" et "Copier en tant qu'élément de préchargement" : une nouvelle colonne Préchargé indique si une requête réseau a été lancée à l'aide du préchargement spéculatif. Vous pouvez également effectuer un clic droit sur une requête et sélectionner Copier en tant qu'élément de préchargement pour générer une balise <link rel="preload"> prête à être insérée dans votre code HTML. Les indications précoces sont désormais classées dans la colonne Initiateur.
• Lecteur binaire pour les charges utiles des requêtes : l'onglet Charge utile inclut désormais des options de méthode de décodage (Base64, Hex et UTF-8) pour les charges utiles des requêtes binaires et compressées, à l'image de l'onglet "Réponse".
• Colonne "Numéro de la demande épinglée" : la colonne "Demande #" est désormais épinglée à la première position de la grille de données du réseau pour faciliter la référence aux demandes.
• Filtrage des hôtes du même site : la recherche de domaines, de noms d'hôte ou de ports (par exemple, localhost ou example.com) dans la barre de filtres "Réseau" filtre désormais précisément les requêtes du même site.
• Décodage par défaut des paramètres de requête : les paramètres de requête et de formulaire de l'onglet "Charge utile" sont désormais décodés automatiquement pour toutes les requêtes.

Problèmes Chromium : 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Éléments : ornements d'éléments personnalisés, interactions avec le sélecteur parent CSS imbriqué et sélection du pseudo-élément $0

L'inspection et la création de composants Web et de CSS modernes sont plus rapides et plus intuitives dans le panneau Éléments :

• Badge d'ornement d'élément personnalisé : les éléments HTML personnalisés (identifiés par des balises avec des tirets ou des attributs is="..." pour les éléments intégrés personnalisés) affichent désormais un badge d'ornement custom-element dans le plan de l'arborescence DOM.
• Interactions et spécificité du sélecteur parent CSS imbriqué : lorsque vous pointez sur des sélecteurs parents dans des règles CSS imbriquées et des règles imbriquées héritées, les éléments correspondants sur la page sont désormais mis en surbrillance et répondent au filtrage de l'onglet "Styles". Ajout de pop-ups d'info-bulles de spécificité pour les règles @nested-declarations.
• Sélection de pseudo-éléments via $0 : la sélection de pseudo-éléments tels que ::before ou ::after dans l'arborescence DOM des éléments les lie désormais directement à la variable de console $0 pour une inspection JavaScript immédiate.
• Saisie semi-automatique pour les types text-wrap et <image> : le volet "Styles" suggère désormais toutes les valeurs de mots clés pour text-wrap (wrap, nowrap, balance, pretty, stable) et saisit automatiquement les propriétés CSS acceptant les types de données <image>.
• Prise en compte des barres de défilement dans le modèle de boîte : le diagramme des métriques du modèle de boîte calcule et affiche désormais avec précision les dimensions de la boîte de contenu lorsque les éléments comportent des barres de défilement visibles.

Problèmes Chromium : 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Performances : métriques de navigation logicielle dans les métriques en direct et préréglages de capture d'écran personnalisés

• Prise en charge des métriques en direct pour les navigations douces : la vue "Métriques en direct" capture et signale désormais les métriques Core Web Vitals (telles que LCP et INP) pour les navigations douces côté client dans les applications monopages par défaut, grâce à une mise à niveau vers web-vitals v6.0.0.
• Préréglages personnalisés pour la capture d'écran : les préréglages configurables pour la taille et le nombre de frames de capture d'écran sont exposés pour le traçage CDP dans le panneau "Performances". Vous pouvez ainsi personnaliser la fidélité de l'enregistrement visuel en fonction des budgets de mémoire.
• Révélateur de trace console.profileEnd() : l'appel de console.profileEnd() dans votre code ou votre console ouvre et révèle désormais automatiquement la trace enregistrée dans le panneau "Performances".
• Résumé des pistes personnalisées de l'API d'extensibilité : les résumés de trace de performances traitent et présentent désormais les groupes de pistes personnalisés enregistrés à l'aide de l'API d'extensibilité.

Problèmes Chromium : 514721939,490140054,536954453,535506117

Console : exporter des tableaux au format Markdown ou CSV et protection contre les effets secondaires

• Copier les tableaux de la console au format Markdown ou CSV : les tableaux enregistrés à l'aide de console.table() peuvent désormais être copiés directement dans votre presse-papiers sous forme de tableaux Markdown mis en forme ou de données CSV à partir du menu contextuel.
• Protection contre l'évaluation des effets secondaires : l'évaluation au survol du débogueur protège désormais contre les expressions contenant des opérateurs new, des littéraux de modèle tagués, des import() dynamiques et des opérateurs delete, ce qui évite les mutations d'état accidentelles pendant la pause.

Problèmes Chromium : 40924951, 40133606

Autres points marquants

Voici quelques améliorations notables apportées à d'autres sous-systèmes des outils de développement :

• Sources : l'ouverture rapide donne désormais la priorité aux fichiers d'espace de travail locaux en leur attribuant un score élevé, ce qui les fait remonter en haut de la liste au-dessus des ressources réseau. (Problème Chromium : 40260136)
• Mémoire : la vue "Récapitulatif du snapshot du tas" affiche désormais le nombre total d'objets ainsi que les tailles superficielles agrégées pour les types sélectionnés. Elle inclut également des filtres de contexte d'exécution natifs. (Problème Chromium : 497855658)
• Application : le panneau Annonces a déplacé le bouton Mettre en surbrillance les annonces directement dans le panneau, ajouté des ID d'éléments iframe d'annonce cliquables pour afficher les frames dans la hiérarchie et introduit un tableau de répartition des métriques par frame. (Problème Chromium : 514957134)
• Application : la section Effacer les données des sites du volet "Stockage" a été repensée pour former un groupe unifié et consolidé (problème Chromium : 375867286). Les entrées en double du cache ont été résolues après la restauration du cache Back/Forward (problème Chromium : 484693244).
• Extensions : les méthodes asynchrones de chrome.devtools.panels renvoient désormais nativement des promesses JavaScript lorsqu'elles sont appelées sans rappel. (Problème Chromium : 496604551)
• Paramètres : les préréglages de limitation de bande passante réseau par défaut et les configurations de limitation personnalisées sont désormais répartis dans des sections distinctes. (Problème Chromium : 342409451)
• Lighthouse : le module Lighthouse fourni a été mis à jour vers la version 13.4.1. (Problème Chromium : 40543651)
• Problèmes : les outils pour les développeurs affichent un avertissement lorsqu'une image utilisant loading="lazy" ne comporte pas de dimensions width ou height explicites.
• Mode Appareil : le menu du niveau de zoom a été simplifié avec une option Ajuster à la fenêtre unifiée. L'option Afficher le cadre de l'appareil a été désactivée lorsque les graphiques du cadre ne sont pas disponibles.

Améliorations de l'accessibilité

Chrome 152 inclut les améliorations d'accessibilité suivantes :

• Éléments et accessibilité : ajout d'options de menu contextuel pour passer facilement de l'arborescence DOM des éléments à la vue en arborescence de l'accessibilité, ainsi que l'option "Faire défiler jusqu'à l'affichage" pour les nœuds d'accessibilité. (Problèmes Chromium : 417929842)
• Accessibilité : ajout de la possibilité de copier des nœuds et des sous-arborescences de l'arborescence d'accessibilité en tant que texte brut à l'aide du menu contextuel. (Problème Chromium : 417929842)
• Éléments : correction des couleurs de mise en surbrillance de la recherche à faible contraste dans le panneau "Éléments" en mode sombre. (Problème Chromium : 491718898)
• Navigation : le fait de détacher les outils de développement dans une fenêtre distincte ou de les réancrer dans l'onglet ne force plus la sélection du bouton du menu principal.
• Paramètres : ajout d'un contexte descriptif accessible aux boutons "Afficher plus" et "Afficher moins" dans les paramètres d'IA.