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

Sofia Emelianova
Sofia Emelianova
GitHub

Trouver l'easter egg

Pour célébrer le 1er avril de cette année, l'équipe DevTools a caché un Easter egg quelque part dans les outils de développement.

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

Modifications apportées au 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 comporte désormais l'option Émuler une page ciblée sous le bouton Activer/Désactiver l'état des éléments (:hov). Auparavant, vous ne pouviez trouver cette option que dans le panneau Rendu.

Si vous passez de la page aux outils de développement, certains éléments de superposition se masquent automatiquement s'ils sont déclenchés par la mise au point. Par exemple, les listes déroulantes, les menus ou les 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 d'angle et éditeur d'interpolation 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 d'angle et l'éditeur d'interpolation dans les solutions de remplacement var().

Rendu avant et après des outils de sélecteur de couleur, de sélecteur d'angle et d'éditeur d'interpolation dans les valeurs de secours var().

Problème Chromium : 1520417.

L'outil de longueur CSS est obsolète

L'outil de création de longueur CSS est obsolète, car les utilisateurs ont indiqué qu'il ralentissait le workflow et n'apportait pas beaucoup de valeur ajoutée.

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écochez Paramètres > Tests > Supprimer l'outil de création CSS <length> dans l'onglet "Styles".

Si vous souhaitez toujours utiliser cet outil, l'équipe DevTools aimerait connaître votre avis et savoir comment l'outil de longueur vous aide dans votre workflow. N'hésitez pas à laisser vos commentaires sur crbug/1522657.

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

Pop-up pour le résultat de recherche sélectionné dans Performances > Piste principale

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

Avant et après : un pop-over s&#39;affiche au-dessus du résultat de recherche sélectionné.

Problème Chromium : 1523279.

Mises à jour du panneau "Réseau"

Cette version apporte quelques modifications au panneau Réseau.

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

L'onglet Réseau > EventStream contient 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 des outils de développement tient à remercier Charles Vazac pour l'implémentation de 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èmes Chromium : 1488863, 40659493.

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

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

Avant et après : info-bulle indiquant le motif d&#39;exemption d&#39;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 ajoute les options Activer et Désactiver tous les points d'arrêt à son menu déroulant. Auparavant, ces options avaient été omises lors de 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.

Avant et après l&#39;ajout de l&#39;onglet &quot;Scripts&quot; avec une arborescence 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 changements notables, on trouve un nouvel audit qui estime les causes profondes des décalages de mise en page. Cet audit remplace l'audit "layout-shift-elements" qui ne listait que les éléments impactés par les décalages de mise en page.

Un nouvel audit qui estime les causes profondes des changements de mise en page.

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.

Accessibilité

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

  • Les lecteurs d'écran annoncent désormais :
    • 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 des Paramètres > Zones géographiques s'affiche désormais correctement pour les outils d'accessibilité.

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

Autres points importants

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

  • Les polices des outils pour les développeurs ont été mises à jour pour correspondre à celles de Chrome (1523538).
  • Performances : correction de l'affichage des captures d'écran lorsque vous pointez sur la timeline (1519469).
  • Sources : la hauteur de ligne dans l'éditeur a été augmentée pour une meilleure 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 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.