Nouveautés des outils de développement (Chrome 123)

Sofia Emelianova
Sofia Emelianova

Trouver l'œuf de Pâques

Pour célébrer le 1er avril de cette année, l'équipe DevTools a caché un œuf de Pâques quelque part dans DevTools.

Pour le trouver, recherchez l'emoji 💫 coloré.

Mises à jour du panneau "Elements"

Cette version apporte plusieurs modifications au panneau Éléments.

Émuler une page sélectionnée dans Éléments > Styles

L'onglet Éléments > Styles contient désormais l'option Emuler une page sélectionnée sous le bouton Activer/Désactiver l'état des éléments (:hov). Auparavant, cette option n'était disponible que dans le panneau Rendering (Rendu).

Si vous déplacez le focus de la page vers les outils de développement, certains éléments de superposition se cachent automatiquement s'ils sont déclenchés par le focus. Par exemple, des listes déroulantes, des menus ou des sélecteurs de date. L'option Émuler une page sélectionnée vous permet de déboguer un tel élément comme s'il était sélectionné.

Avant et après l'émulation d'une page sélectionnée dans l'onglet "Styles".

Problème Chromium: 1468393.

Sélecteur de couleur, horloge angulaire et éditeur d'atténuation dans les solutions de remplacement var()

Pour simplifier la modification du CSS, l'onglet Éléments > Styles vous permet désormais d'utiliser le sélecteur de couleur, l'horloge angulaire et l'éditeur d'adoucissement dans les valeurs de remplacement var().

Avant et après le rendu des outils de sélecteur de couleur, de cadran d'angle et d'éditeur d'atténuation dans les solutions de remplacement var().

Problème Chromium: 1520417.

L'outil de longueur CSS est obsolète

L'outil d'écriture de la longueur CSS est obsolète, car les commentaires indiquent qu'il ralentit le workflow et n'apporte pas beaucoup de valeur.

Vous ne pouvez plus faire glisser le curseur pour ajuster la valeur ni sélectionner un type d'unité dans le menu déroulant. Double-cliquez plutôt sur la valeur et saisissez-en une nouvelle.

Pour réactiver l'outil de longueur, désélectionnez Settings > Experiments > Deprecate CSS <length> authoring tool in the Styles tab (Paramètres > Tests > Désactiver l'outil d'édition CSS <length> dans l'onglet "Styles").

Si vous souhaitez tout de même utiliser cet outil, l'équipe DevTools aimerait connaître votre avis et savoir en quoi il vous aide dans votre workflow. N'hésitez pas à nous envoyer vos commentaires sur crbug/1522657.

Le test d&#39;abandon est désactivé.

Volet pop-up pour le résultat de recherche sélectionné dans "Performances > Trajet principal"

Pour faciliter la recherche, le graphique en forme de flamme dans le canal Performances > Principal affiche désormais un pop-up au-dessus de l'événement correspondant lorsque vous parcourez les résultats de recherche.

Aperçu avant/après avec un pop-up sur le résultat de recherche sélectionné.

Problème Chromium: 1523279.

Mises à jour du panneau "Network" (Réseau)

Cette version apporte quelques modifications au panneau Network (Réseau).

Bouton "Effacer" et filtre de recherche dans l'onglet "Réseau > EventStream"

L'onglet Network > EventStream reçoit les éléments suivants:

  • Un bouton Effacer qui efface les événements capturés dans le tableau.
  • Filtre de recherche qui comprend les expressions régulières.

Avant et après l&#39;ajout d&#39;un bouton &quot;Effacer&quot; et d&#39;un filtre de recherche

L'équipe DevTools tient à remercier Charles Vazac pour avoir implémenté cette fonctionnalité.

De plus, l'onglet EventStream capture désormais également les événements que les serveurs envoient via fetch/XHR, et pas seulement l'API EventSource. Essayez-le sur cette page de démonstration.

Problème Chromium: 1488863, 40659493.

Info-bulles avec les raisons d'exemption pour les cookies tiers dans "Réseau > Cookies"

L'onglet Network > Cookies affiche désormais des info-bulles avec les raisons d'exemption à côté des cookies qui auraient dû être bloqués par l'abandon des cookies tiers.

&quot;Avant&quot; et &quot;Après&quot; montrant une info-bulle avec un motif d&#39;exemption pour un cookie tiers.

Les cookies tiers peuvent être autorisés pour les raisons suivantes:

Problème Chromium: 41491846.

Activer et désactiver tous les points d'arrêt dans "Sources"

La section Sources > Points d'arrêt rétablit les options Activer et Désactiver tous les points d'arrêt dans son menu déroulant. Auparavant, ces options n'étaient pas incluses dans la refonte des points d'arrêt.

Pour activer ou désactiver tous les points d'arrêt, effectuez un clic droit sur un point d'arrêt dans Sources > Points d'arrêt, puis sélectionnez l'option correspondante.

Avant et après le rétablissement des options d&#39;activation et de désactivation.

Problème Chromium: 1522037.

Afficher les scripts chargés dans les outils de développement pour Node.js

Les outils de développement pour Node.js affichent désormais les scripts chargés dans l'arborescence de navigation sous Sources > Scripts.

État avant et après l&#39;ajout de l&#39;onglet &quot;Scripts&quot; avec un arbre des scripts chargés.

Problème Chromium: 1518364.

Lighthouse 11.5.0

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

Parmi les modifications notables, vous trouverez un nouvel audit qui estime les causes des décalages de mise en page. Cet audit remplace l'audit "layout-shift-elements" qui ne listait que les éléments concernés par les décalages de mise en page.

Nouvel audit qui estime les causes des décalages de mise en page.

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.

Accessibilité

Cette version présente les améliorations d'accessibilité suivantes:

  • Les lecteurs d'écran annoncent désormais les éléments suivants :
    • Texte du lien En savoir plus à côté des types de sélecteurs dans le panneau Enregistreur.
    • Lorsque aucun test ne correspond au filtre dans Paramètres > Tests.
    • Confirmation de l'action lorsque vous supprimez, confirmez ou restaurez un raccourci dans Paramètres > Raccourcis.
  • Le tableau de Paramètres > Emplacements s'affiche désormais correctement sous forme de tableau pour les outils d'accessibilité.

Problèmes Chromium: 1516957, 324282443, 324467508, 324930007.

Autres points forts

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

  • Les polices dans les outils pour les développeurs sont mises à jour pour correspondre à Chrome (1523538).
  • Performances: correction de l'affichage de la capture d'écran lorsque vous pointez sur la chronologie (1519469).
  • Sources: la hauteur de ligne dans l'Éditeur a été augmentée pour améliorer la lisibilité du code (1523640).
  • Réseau > Réponses: correction de divers problèmes d'affichage avec différents formats et encodages (1523128, 1509336, 1523128, 41481944, 1509336).

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.