Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

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

Cette version de Chrome intègre des fonctionnalités d'IA générative à la console DevTools, qui vous aideront à 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) à côté du message dans la Console, puis suivez les instructions.

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

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

Prise en charge des règles `@position-try` dans Éléments > Styles

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

Les règles CSS "avant" et "après" sont acceptées par @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'impression élégante et la fermeture des crochets automatiques

Vous pouvez désormais activer ou désactiver l'impression élégante et la fermeture des crochets automatiques pour l'éditeur dans Sources. L'impression élégante permet de lire les fichiers réduits. La fermeture des crochets ajoute automatiquement une accolade fermante () ou }) ou une balise (>) lorsque vous en saisissez un.

Pour configurer le comportement approprié, cochez ou décochez les nouvelles check_box Fermeture automatique des crochets et check_box Imprimer automatiquement l'impression élégante des sources réduites dans check_box Paramètres > Préférences > Sources.

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 refusées comme étant interceptées si vous les avez traitées avec .catch() ou une .then() à deux arguments.

En d'autres termes, lorsque Sources > Points d'arrêt > check_box Suspendre pour les exceptions non interceptées est activé, le débogueur ne s'interrompt pas sur les instructions semblables à celle-ci:

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

Détection des refus détectés avant et aprè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 d'erreur lors de la détection et de la nouvelle génération d'erreurs. Lorsque la console explore la chaîne de causes, elle affiche chaque pile d'erreur avec le 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 du panneau "Network"

Cette version apporte plusieurs améliorations au panneau Network (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) qui permet d'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 grâce au 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 check_box_outline_blank Waterfall (Cascade d'annonces) dans le menu déroulant.

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

Problème Chromium: 40574989.

Améliorations du panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Capturer les statistiques du sélecteur CSS

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

Pour afficher les statistiques, sélectionnez un événement Recalculer le style et ouvrez le nouvel 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.

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

Problème Chromium: 324282954.

Modifier l'ordre et masquer les 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 Edit (Modifier) Edit (Modifier) à gauche du nom de la piste. Ensuite, cliquez sur la flèche arrow_upward vers le haut ou arrow_downward vers le bas pour déplacer le tracé, ou cliquez sur Masquer visibility_off. Lorsque vous avez terminé, cliquez sur le bouton OK Check situé à 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 objets de conservation dans les instantanés de segments de mémoire que vous capturez avec le panneau Memory (Mémoire).

Pour ignorer un élément de conservation, sélectionnez un objet, puis, dans la section Éléments de conservation, effectuez un clic droit sur un élément de conservation, puis sélectionnez Ignorer cet élément de conservation dans le menu déroulant. Les éléments de conservation ignorés sont marqués avec la valeur ignored dans la colonne Distance. Pour ne plus ignorer les éléments de conservation, cliquez sur Restaurer les éléments de conservation ignorés dans la barre d'action en haut.

Ajout d'une option avant et après permettant d'ignorer les éléments de conservation.

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.

Lighthouse 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 bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Points importants divers

Voici quelques correctifs et améliorations importants dans 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. Il accepte désormais les options v et d dans les expressions régulières.
L'onglet Réseau > Cookies a corrigé un bug lors du mappage des cookies exemptés aux 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

Vous pouvez 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 plates-formes 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.