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

Sofia Emelianova
Sofia Emelianova
GitHub

Mieux comprendre les erreurs et les avertissements dans la console grâce à 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 sur une erreur ou un avertissement, cliquez sur le bouton Une idée lumineuse. Comprendre cette erreur (cet avertissement) à côté du message dans la console, puis suivez les instructions.

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

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.

Avant et après la prise en charge des règles CSS @position-try.

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

Problème Chromium : 40279608.

Améliorations apportées au panneau "Sources"

Cette version apporte plusieurs améliorations au panneau Sources.

Configurer la mise en forme et la fermeture automatique des crochets

Vous pouvez désormais activer ou désactiver l'impression esthétique et la fermeture automatique des crochets pour l'éditeur dans Sources. L'impression élégante permet de rendre les fichiers minimisés lisibles. La fermeture automatique des crochets ajoute 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 Fermeture automatique des crochets et Mise en forme automatique des sources réduites dans Paramètres > Préférences > Sources.

Avant et après l'ajout de nouveaux paramètres pour la mise en forme automatique et la fermeture des crochets.

Problèmes Chromium : 40865010, 324314570.

Les promesses rejetées gérées sont reconnues comme interceptées.

Le panneau Sources reconnaît désormais correctement les promesses rejetées comme intercepté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 sur les exceptions non interceptées est activé, le débogueur ne s'arrête pas sur les instructions semblables à celles ci-dessous :

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

Avant et après la reconnaissance des refus interceptés.

Problème Chromium : 40283993.

Causes d'erreur dans la console

La console affiche désormais les 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 d'erreur lorsque vous capturez et relancez des erreurs. À mesure que la console remonte la chaîne des causes, elle affiche chaque pile d'erreurs avec un préfixe Caused by:, ce qui vous permet de voir l'erreur d'origine.

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

Problème Chromium : 40182832.

Améliorations apportées au panneau "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 En-têtes de la requête du panneau Réseau. Auparavant, vous pouviez trouver les en-têtes concernés 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 indications au navigateur concernant les sous-ressources critiques (par exemple, une feuille de style ou un JavaScript critique) ou les origines qui seront probablement utilisées par la page, pendant que le serveur est occupé à générer la ressource principale.

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

Pour en savoir plus, consultez Charger les pages plus rapidement en utilisant le temps de réflexion du serveur avec les indications précoces.

Problème Chromium : 40222701.

Masquer la colonne "Cascade"

Vous pouvez désormais masquer la colonne Cascade dans le panneau Réseau, comme vous pouvez le faire pour les autres colonnes. Effectuez un clic droit sur le nom d'une colonne, puis 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 comporte un nouveau paramètre qui vous permet de capturer les statistiques du sélecteur CSS pour les événements Recalculer le style de longue durée.

Pour afficher les statistiques, sélectionnez un événement Recalculate Style et ouvrez le nouvel onglet Selector Stats. Cet onglet affiche des informations sur le temps écoulé, le nombre et les tentatives de correspondance, ainsi que le pourcentage de non-correspondances de chemin lent pour chaque sélecteur.

Statistiques du sélecteur avant et après l'ajout.

Problème Chromium : 324282954.

Modifier l'ordre et masquer des pistes

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

Pour accéder au mode de configuration, cliquez sur le bouton Modifier à gauche du nom de la piste. Cliquez ensuite sur vers le haut ou vers le bas pour déplacer la piste, ou sur pour la masquer. Lorsque vous avez terminé, cliquez sur le bouton Cocher à droite du nom du titre.

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

Problème Chromium : 311439339.

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

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

Pour ignorer un élément de retenue, sélectionnez un objet, puis dans la section Élément de retenue, effectuez un clic droit sur un élément de retenue et sélectionnez Ignorer cet élément de retenue dans le menu déroulant. Les retenues ignorées sont marquées avec la valeur ignored dans la colonne Distance. Pour arrêter d'ignorer les retenues, cliquez sur Restaurer les retenues ignorées dans la barre d'action en haut de la page.

Avant et après l'ajout d'une option permettant d'ignorer les dispositifs de contention.

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

Problème Chromium : 327337527.

Lighthouse 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, on peut citer l'arrêt de la prise en charge du plug-in Publisher Ads, qui est devenu obsolète dans cette version.

Avant et après l'ajout de l'assistance du plug-in Publisher Ads.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 772558.

Autres points importants

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

  • Le panneau Enregistreur n'est plus en version bêta (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 été mis à jour avec un outil de mise en surbrillance syntaxique. Il prend désormais en charge les indicateurs v et d dans les expressions régulières.
  • L'onglet Réseau > Cookies a corrigé un bug lié au mappage des cookies exemptés avec les cookies de réponse (41491846).
  • L'onglet Éléments > Styles permet désormais de :
    • Affiche les règles héritées entièrement surchargées avec des propriétés personnalisées (41489874).
    • Met en évidence 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 Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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 sujets abordés dans la série Nouveautés de DevTools.