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

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

Sofia Emelianova

Trouver l'easter egg

Pour fêter le poisson d'avril de l'année L'équipe DevTools a caché un easter egg quelque part dans les outils de développement.

Pour le trouver, cherchez un emoji coloré 💫.

Mises à jour du panneau des éléments

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

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

La page Éléments > L'onglet Styles dispose désormais de la check_box Émuler une page sélectionnée sous le bouton Activer/Désactiver l'état des éléments (:hov). Auparavant, cette option ne s'affichait que dans le panneau Rendu.

Si vous basculez le curseur de la page vers les outils de développement, certains éléments de superposition sont automatiquement masqués s'ils sont déclenchés par le curseur. 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 dans le champ de vision.

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

Problème Chromium: 1468393.

Sélecteur de couleur, horloge d'angle et éditeur de lissage de vitesse dans les créations de remplacement `var()`

Pour simplifier la modification du code CSS, utilisez la commande Éléments > L'onglet Styles vous permet désormais d'utiliser le sélecteur de couleurs, l'horloge d'angle et l'éditeur de lissage de vitesse dans les créations de remplacement var().

Outils de sélection de couleur avant et après le rendu, d'horloge d'angle et d'éditeur de lissage de vitesse dans les créations de remplacement var().

Problème Chromium: 1520417.

L'outil de longueur CSS est obsolète

L'outil de création de longueurs CSS est obsolète, car il ralentit le workflow et ne présente aucune valeur ajoutée.

Vous ne pouvez plus faire glisser pour ajuster la valeur ou sélectionner un type d'unité dans le menu déroulant. À la place, double-cliquez sur la valeur et saisissez-en une nouvelle.

Pour réactiver l'outil de réglage de la longueur, effacez les paramètres Paramètres > Tests > check_box Abandon de CSS <length> dans l'onglet "Styles".

Si vous souhaitez tout de même utiliser cet outil, l'équipe des outils de développement aimerait connaître votre avis et savoir comment l'outil de durée vous aide dans votre flux de travail. N'hésitez pas à nous faire part de vos commentaires dans crbug/1522657.

Le test d'abandon est désactivé.

Pour faciliter les recherches, utilisez le graphique de type "flamme" sous Performances > Le titre principal affiche désormais une fenêtre pop-up en haut de l'événement correspondant lorsque vous parcourez les résultats de recherche.

Affichage avant/après d'un pop-over sur le résultat de recherche sélectionné.

Problème Chromium: 1523279.

Mises à jour du panneau "Network"

Cette version apporte quelques mises à jour au panneau Network (Réseau).

Effacer le bouton et le filtre de recherche sous "Réseau" > Onglet "EventStream"

La page Réseau > L'onglet EventStream contient les éléments suivants:

Un bouton Effacer Effacer qui efface les événements capturés de la table.
Filtre de recherche qui comprend les expressions régulières.

Avant et après l'ajout d'un bouton "Effacer" et d'un filtre de recherche.

L'équipe DevTools souhaite remercier Charles Vazac d'avoir découvert cette fonctionnalité.

De plus, l'onglet EventStream capture désormais également les événements envoyés par les serveurs via "fetch/XHR", et pas seulement avec l'API EventSource. Essayez-la sur cette page de démonstration.

Problème Chromium: 1488863, 40659493.

Info-bulles indiquant les motifs d'exception pour les cookies tiers dans Réseau > Biscuits

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

Affichage avant/après avec une info-bulle indiquant le motif d'exception pour un cookie tiers.

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

Règles Chrome Enterprise
API Storage Access ou API Storage Access de premier niveau
Essai avant arrêt progressif des cookies tiers ou délai de grâce
Heuristique de l'abandon progressif des cookies tiers
Préférence de l'utilisateur

Problème Chromium: 41491846.

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

La page Sources > La section Points d'arrêt rétablit les options Activer et Désactiver tous les points d'arrêt dans le menu déroulant. Auparavant, ces options étaient ignorées 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.

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.

Onglet "Scripts" avant et après ajout, avec une arborescence de 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, il y a un nouvel audit qui estime les causes principales des décalages de mise en page. Cet audit remplace l'audit "Layout-shift-elements" (Éléments de mise en page) qui ne listait que les éléments affectés par ces décalages.

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

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Accessibilité

Cette version comporte les améliorations d'accessibilité suivantes:

Les lecteurs d'écran annoncent désormais: <ph type="x-smartling-placeholder">
- Texte du lien En savoir plus à côté des types de sélecteur dans le panneau Enregistreur.
- Lorsqu'aucun test ne correspond au filtre défini dans Paramètres Paramètres > Tests :
- Confirmation de l'action lorsque vous supprimez, confirmez ou restaurez un raccourci dans Paramètres Paramètres > Raccourcis.
Le tableau sous Paramètres Paramètres > Les emplacements s'affichent désormais correctement sous forme de tableau pour les outils d'accessibilité.

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

Points importants divers

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

Les polices dans les outils de développement sont mises à jour pour correspondre à celles de Chrome (1523538).
Performances: correction de l'affichage des captures d'écran lors du survol de la timeline (1519469).
Sources: la hauteur de la 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

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 vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème 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.