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

Sofia Emelianova
Sofia Emelianova

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 concernant une erreur ou un avertissement, cliquez sur le bouton Comprendre cette erreur (avertissement) Étincelle autour d'une ampoule. à 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 d'ancrage 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 des crochets ajoute automatiquement un crochet fermant () ou }) ou une balise (>) lorsque vous en saisissez un.

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 > Paramètres > Préférences > Sources).

Ajout de nouveaux paramètres avant et après pour l'impression élégante et la fermeture des crochets automatiques.

Problèmes Chromium: 40865010, 324314570.

Les promesses refusées traitées sont reconnues comme étant intercepté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'erreurs 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 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.

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

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 indications précoces

Ces en-têtes 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 au navigateur des indications sur les sous-ressources critiques (par exemple, une feuille de style ou le code JavaScript critique) ou les origines susceptibles d'être utilisées par la page, tandis que le serveur est occupé à générer 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 maintenant masquer la colonne Waterfall dans le panneau Network (Réseau) de la même manière que vous pouvez masquer d'autres colonnes. Effectuez un clic droit sur le nom d'une colonne et décochez la case Waterfall (Cascade d'annonces) 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é, le nombre de tentatives de correspondance et le nombre total, ainsi que le pourcentage de non-correspondances à 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 pistes

Le panneau Performances dispose d'un nouveau mode de configuration qui vous permet de modifier l'ordre des canaux et de les masquer.

Pour passer en mode de configuration, cliquez sur le bouton (Modifier) Edit (Modifier) à gauche du nom de la piste. 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 des améliorations supplémentaires à 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 segments de mémoire acceptent désormais un plus grand nombre (des centaines de millions) de nœuds et de périphéries de cloisonnement (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 changements notables, citons la compatibilité obsolète du plug-in Publisher Ads, qui est devenu obsolète dans cette version.

Suppression de la compatibilité du plug-in Publisher Ads avant et après l'ajout.

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.

Points importants divers

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

  • Le panneau Enregistreur n'est désormais plus en mode prévisualisation (329271496).
  • La console n'affiche plus d'erreur lorsqu'un outil de mise en forme 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 a corrigé un bug lié au mappage des cookies exemptés et des cookies de réponse (41491846).
  • L'onglet Éléments > Styles effectue désormais les opérations suivantes :
    • 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 couleurs (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 versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plate-forme Web de pointe et de 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 sujets abordés dans la série Nouveautés concernant les outils de développement