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, afin de vous aider à mieux comprendre les erreurs et avertissements que vous rencontrez.

Pour obtenir une explication d'une erreur ou d'un avertissement générée par IA, 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 avec l'IA.

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

Pour vous aider à déboguer le positionnement de l'ancrage CSS, l'onglet Éléments > Styles accepte désormais 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 compatibles avec les règles CSS @position-try.

Pour en savoir plus, consultez Partager des éléments entre eux grâce au positionnement de l'ancrage 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 page vitrine automatique et la fermeture des crochets

Vous pouvez désormais activer ou désactiver l'impression élégante de la mise en page et la fermeture des crochets pour l'éditeur dans Sources. L'impression élégante rend lisibles les fichiers dont la taille est réduite. La fermeture des crochets ajoute automatiquement une parenthèse fermante () ou }) ou une balise (>) lorsque vous saisissez une parenthèse ouvrante.

Pour configurer le comportement approprié, cochez ou décochez les nouvelles options check_box, Fermeture automatique des crochets et check_box, Automatiquement pour les sources d'impression réduites dans paramètres, 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 l'option Sources > Points d'arrêt > check_box Suspendre sur les exceptions non détectées est activée, le débogueur ne s'interrompt pas sur les instructions semblables à celle-ci:

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

Les refus avant et après reconnaissance des refus repéré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 lors de l'identification et de la nouvelle génération des erreurs. Lorsque la console parcourt la chaîne de causes, elle affiche chaque pile d'erreurs avec le préfixe Caused by:, de sorte que vous puissiez toujours voir l'erreur d'origine.

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

Problème Chromium: 40182832.

Améliorations apportées au panneau "Network"

Cette version apporte plusieurs améliorations au panneau Network.

Inspecter les en-têtes d'indicateurs anticipés

Les en-têtes "Early Hints" (indices anticipés) bénéficient 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 correspond à 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 du code JavaScript critique) ou les origines susceptibles d'être utilisées par la page, pendant que le serveur est en train de générer la ressource principale.

L'avant et après l'ajout d'une section dédiée aux premiers indicateurs.

Pour en savoir plus, consultez Chargement des pages plus rapide grâce au temps de réflexion du serveur avec les premiers indicateurs.

Problème Chromium: 40222701.

Masquer la colonne Waterfall

Vous pouvez maintenant masquer la colonne Waterfall (Cascade d'eau) dans le panneau Network (Réseau) de la même manière que vous pouvez masquer d'autres colonnes. Cliquez avec le bouton droit sur n'importe quel nom de colonne et décochez la case check_box_outline_blank Waterfall dans le menu déroulant.

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

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

Un nouveau paramètre du panneau Performances vous permet de capturer des statistiques avec les sélecteurs 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 et le nombre de tentatives de correspondance, ainsi que le pourcentage de non-correspondances de chemins lents pour chaque sélecteur.

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

Problème Chromium: 324282954.

Modifier l'ordre et masquer les titres

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

Pour accéder au mode de configuration, cliquez sur le bouton Edit Edit (Modifier) situé à gauche du nom du canal. Ensuite, cliquez sur arrow_upward vers le haut ou arrow_downward vers le bas pour déplacer le titre ou cliquez sur visibility_off pour le masquer. Lorsque vous avez terminé, cliquez sur le bouton OK Check à droite du nom du titre.

La prochaine version, Chrome 126, apportera de nouvelles améliorations à cette interface utilisateur.

Problème Chromium: 311439339.

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

Vous pouvez désormais ignorer les éléments de conservation des instantanés de segments de mémoire que vous capturez à l'aide du panneau Memory (Mémoire).

Pour ignorer un élément de conservation, sélectionnez un objet et, dans la section Espace 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 réservation ignorés sont marqués avec la valeur ignored dans la colonne Distance. Pour ne plus ignorer d'éléments, cliquez sur Restaurer les éléments de conservation 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 éléments de conservation.

De plus, les instantanés de tas de mémoire acceptent désormais un plus grand nombre (des centaines de millions) de bordures et de nœuds de confinement (332350576).

Problème Chromium: 327337527.

Lighthouse 11.7.1

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

Parmi les changements notables, citons l'abandon du plug-in Publisher Ads, devenu obsolète dans cette version.

L'avant et après l'ajout de la prise en charge du plug-in d'annonces d'éditeur.

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 forts divers

Voici quelques correctifs et améliorations importants dans cette version:

Le panneau Enregistreur n'est désormais plus disponible en version preview (329271496).
Désormais, 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.
Correction d'un bug dans l'onglet Réseau > Cookies lors du mappage des cookies exemptés avec les 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 avec light-dark() en fonction du thème de couleurs. (331123816)

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.