Nouveautés des outils de développement, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Mieux comprendre les erreurs et les avertissements dans la console avec Gemini

Cette version de Chrome apporte des fonctionnalités d'IA générative à la console des outils pour les développeurs, afin de vous aider à mieux comprendre les erreurs et les avertissements que vous rencontrez.

Pour obtenir une explication générée par IA d'une erreur ou d'un avertissement, cliquez sur le bouton Étincelle d'une ampoule. Comprendre cette erreur (avertissement) à côté du message dans la console, puis suivez les instructions.

Explication générée par IA d'une erreur.

Pour en savoir plus, consultez Mieux comprendre les erreurs et les avertissements grâce à l'IA.

Compatibilité avec les règles @position-try dans Éléments > Styles

Pour vous aider à déboguer le positionnement des ancres CSS, l'onglet Éléments > Styles est désormais compatible avec les règles CSS @position-try. L'onglet résout les valeurs position-try-options et associe chaque option à une section @position-try --name dédiée.

L'avant et l'après sont compatibles avec les règles CSS @position-try.

Pour en savoir plus, consultez Présentation de l'API de positionnement des ancres CSS.

Problème Chromium: 40279608.

Améliorations apportées au panneau "Sources"

Cette version apporte plusieurs améliorations au panneau Sources.

Configurer l'affichage soigné automatique et la fermeture automatique des crochets

Vous pouvez désormais activer ou désactiver l'affichage soigné automatique et la fermeture des crochets pour l'Éditeur dans Sources. L'impression élégante rend les fichiers minifiés lisibles. La fermeture de crochet ajoute automatiquement un crochet de fermeture () ou }) ou une balise (>) lorsque vous saisissez un crochet d'ouverture.

Pour configurer le comportement approprié, cochez ou décochez les nouvelles options Auto closing brackets (Parenthèses autofermantes) et Automatically pretty print minified sources (Affichage automatique des sources minifiées) dans Settings > Preferences > Sources (Paramètres > Préférences > Sources).

État avant et après l'ajout de nouveaux paramètres pour l'affichage mis en forme automatique et la fermeture des crochets.

Problèmes Chromium: 40865010, 324314570.

Les promesses refusées gérées sont reconnues comme détectées

Le panneau Sources reconnaît désormais correctement les promesses rejetées comme capturées si vous les avez gérées avec .catch() ou .then() à deux arguments.

En d'autres termes, lorsque Sources > Points d'arrêt > Mettre en pause en cas d'exception non interceptée est activé, le débogueur ne s'arrête pas sur des instructions semblables à celles-ci:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Avant et après la détection des refus détectés.

Problème Chromium: 40283993.

Causes d'erreur dans la console

La console affiche désormais des chaînes de causes d'erreur dans la trace de la pile, le cas échéant.

Pour faciliter le débogage, vous pouvez spécifier les causes des erreurs lorsque vous les interceptez et les renvoyez. Lorsque la console remonte la chaîne des causes, elle imprime chaque pile d'erreur avec un préfixe Caused by: afin que vous puissiez toujours voir l'erreur d'origine.

Les traces de pile avant et après l'impression avec des préfixes "Caused by" (Causé par).

Problème Chromium: 40182832.

Améliorations apportées au panneau "Network" (Réseau)

Cette version apporte plusieurs améliorations au panneau Réseau.

Inspecter les en-têtes des premiers indices

Les en-têtes Early Hints disposent d'une section dédiée dans l'onglet Headers (En-têtes) de la requête du panneau Network (Réseau). Auparavant, vous pouviez trouver les en-têtes pertinents dans la section En-têtes de réponse.

Early Hints est un code d'état HTTP (103 Early Hints) utilisé pour envoyer une réponse HTTP préliminaire avant une réponse finale. Cela permet à un serveur d'envoyer des indices au navigateur sur les sous-ressources critiques (par exemple, une feuille de style ou un code JavaScript critique) ou les origines qui seront probablement utilisées par la page, pendant que le serveur génère la ressource principale.

Avant et après l'ajout d'une section dédiée aux premiers indices

Pour en savoir plus, consultez Chargement plus rapide des pages à l'aide du temps de réflexion du serveur avec les premiers indices.

Problème Chromium: 40222701.

Masquer la colonne "Cascade"

Vous pouvez désormais masquer la colonne Cascade d'annonces dans le panneau Réseau, comme vous le faites pour les autres colonnes. Effectuez un clic droit sur un nom de colonne et décochez la case Cascade dans le menu déroulant.

Avant et après l'ajout de l'option permettant de masquer la colonne "Cascade".

Problème Chromium: 40574989.

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Capturer les statistiques du sélecteur CSS

Le panneau Performances bénéficie d'un nouveau paramètre qui vous permet de capturer les statistiques des sélecteurs CSS pour les événements Recalculer le style de longue durée.

Pour afficher les statistiques, sélectionnez un événement Recalculer le style, puis ouvrez l'onglet Statistiques du sélecteur. L'onglet affiche des informations sur le temps écoulé, les tentatives de mise en correspondance et leur nombre, ainsi que le pourcentage de non-correspondances du chemin lent pour chaque sélecteur.

État avant et après l'ajout de statistiques sur les sélecteurs.

Problème Chromium: 324282954.

Modifier l'ordre et masquer des canaux

Le panneau Performances bénéficie d'un nouveau mode de configuration qui vous permet de modifier l'ordre des pistes et de les masquer.

Pour activer le mode de configuration, cliquez sur le bouton Modifier à gauche du nom du canal. Cliquez ensuite sur vers le haut ou vers le bas pour déplacer le canal, ou sur masquer. Lorsque vous avez terminé, cliquez sur le bouton Vérifier  à droite du nom du titre.

La prochaine version, Chrome 126, apportera d'autres améliorations à cette interface utilisateur.

Problème Chromium: 311439339.

Ignorer les éléments de conservation dans le panneau "Mémoire"

Vous pouvez désormais ignorer les retenants dans les instantanés de tas que vous capturez avec le panneau Mémoire.

Pour ignorer un retenant, sélectionnez un objet, puis, dans la section Retenant, effectuez un clic droit sur un retenant et sélectionnez Ignorer ce retenant dans le menu déroulant. Les retiens ignorés sont marqués de la valeur ignored dans la colonne Distance. Pour arrêter d'ignorer les contrats de rétention, cliquez sur Rétablir les contrats de rétention ignorés dans la barre d'action en haut de la page.

Avant et après l'ajout d'une option permettant d'ignorer les retenues

De plus, les instantanés de tas de mémoire sont désormais compatibles avec un plus grand nombre (des centaines de millions) d'arêtes et de nœuds de structuration (332350576).

Problème Chromium: 327337527.

Phare 11.7.1

Le panneau Lighthouse exécute désormais Lighthouse 11.7.1. Consultez la liste complète des modifications.

Parmi les modifications notables, citons l'abandon de la prise en charge du plug-in Annonces de l'éditeur, qui est devenu obsolète dans cette version.

Avant et après l'ajout/suppression de la prise en charge du plug-in Annonces de l'éditeur

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 772558.

Autres points forts

Voici quelques corrections et améliorations importantes apportées à cette version:

  • Le panneau Enregistreur n'est plus en version Preview (329271496).
  • La console n'affiche plus d'erreur lorsqu'un formateur personnalisé renvoie un null pour la fonction body(), ce qui est un comportement valide (329400119).
  • Le panneau Sources a mis à jour le surligneur de syntaxe. En particulier, il est désormais compatible avec les indicateurs v et d dans les expressions régulières.
  • L'onglet Réseau > Cookies corrige un bug lié à la mise en correspondance des cookies exemptés avec les cookies de réponse (41491846).
  • L'onglet Éléments > Styles permet désormais de faire ce qui suit :
    • Affiche les règles héritées entièrement surchargées avec des propriétés personnalisées (41489874).
    • Met en surbrillance la valeur appliquée dans light-dark() en fonction du thème de couleur (331123816).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.