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

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

Jecelyn Yeen

Panneau "Nouveau média"

Les outils de développement affichent désormais des informations sur les lecteurs multimédias dans le panneau "Multimédia".

Panneau "Nouveau média"

Avant le nouveau panneau multimédia dans les outils de développement, les informations de journalisation et de débogage concernant les lecteurs vidéo se trouvaient dans chrome://media-internals.

Le nouveau panneau "Multimédia" permet d'afficher plus facilement les événements, les journaux, les propriétés et la chronologie des décodages de frames dans le même onglet de navigateur que le lecteur vidéo. Vous pouvez visualiser en direct et inspecter plus rapidement les problèmes potentiels (par exemple, pourquoi la suppression de frames se produit ou pourquoi JavaScript interagit avec le lecteur de manière inattendue).

Problème Chromium: 1018414

Effectuer des captures d'écran du nœud via le menu contextuel du panneau "Elements"

Vous pouvez désormais effectuer des captures d'écran de nœuds via le menu contextuel du panneau "Éléments".

Par exemple, vous pouvez faire une capture d'écran de la table des matières en effectuant un clic droit sur l'élément, puis en sélectionnant Capture node screenshot (Faire une capture d'écran du nœud).

Effectuer des captures d'écran de nœuds

Problème Chromium: 1100253

Mises à jour de l'onglet "Problèmes"

La barre d'avertissement "Problèmes" du panneau de la console est désormais remplacée par un message standard.

Problèmes dans le message de la console

Les problèmes liés aux cookies tiers sont désormais masqués par défaut dans l'onglet "Problèmes". Cochez la nouvelle case Inclure les problèmes de cookies tiers pour les afficher.

case à cocher "Problèmes de cookies tiers"

Problèmes Chromium: 1096481, 1068116, 1080589

Émuler les polices locales manquantes

Ouvrez l'onglet Affichage et utilisez la nouvelle fonctionnalité Désactiver les polices locales pour émuler les sources local() manquantes dans les règles @font-face.

Par exemple, lorsque la police "Rubik" est installée sur votre appareil et que la règle @font-face src l'utilise en tant que police local(), Chrome utilise le fichier de police local de votre appareil.

Lorsque l'option Désactiver les polices locales est activée, les outils de développement ignorent les polices local() et les récupère sur le réseau.

Émuler les polices locales manquantes

Souvent, les développeurs et les concepteurs utilisent deux copies différentes de la même police pendant le développement:

Une police locale pour vos outils de conception, et
Une police Web pour votre code

La désactivation des polices locales facilite les opérations suivantes:

Déboguer et mesurer les performances de chargement et l'optimisation des polices Web
Vérifier l'exactitude de vos règles @font-face CSS
Découvrir les différences entre les polices Web et leurs versions locales

Problème Chromium: 384968

Émuler les utilisateurs inactifs

L'API Idle Detection permet aux développeurs de détecter les utilisateurs inactifs et de réagir aux changements d'état d'inactivité. Vous pouvez désormais utiliser les outils de développement pour émuler les changements d'état d'inactivité dans l'onglet Sensors (Capteurs) pour l'état de l'utilisateur et celui de l'écran au lieu d'attendre que l'état d'inactivité réel change. Vous pouvez ouvrir l'onglet Sensors (Capteurs) à partir du tiroir.

Émuler les utilisateurs inactifs

Problème Chromium: 1090802

Émuler `prefers-reduced-data`

La requête média prefers-reduced-data détecte si l'utilisateur préfère voir un autre contenu utilisant moins de données pour afficher la page.

Vous pouvez maintenant utiliser les outils de développement pour émuler la requête média prefers-reduced-data.

Émuler Preferreds-reduced-data

Problème Chromium: 1096068

Compatibilité avec de nouvelles fonctionnalités JavaScript

Les outils de développement sont désormais compatibles avec certaines des dernières fonctionnalités du langage JavaScript:

Opérateurs d'attribution logique : les outils de développement prennent désormais en charge l'attribution logique avec les nouveaux opérateurs &&=, ||= et ??= dans les panneaux "Console" et "Sources".
Impression élégante des séparateurs numériques : les outils de développement impriment désormais correctement les séparateurs numériques dans le panneau "Sources".

Problèmes Chromium: 1086817, 1080569

Lighthouse 6.2 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 6.2. Consultez les notes de version pour obtenir la liste complète des modifications.

Agrandir l'image

Nouveaux audits dans Lighthouse 6.2:

Évitez les longues tâches de thread principal. Signale les tâches les plus longues sur le thread principal, ce qui est utile pour identifier les facteurs qui contribuent le plus au retard de saisie.
Les liens sont explorables. Vérifiez si l'attribut href des éléments d'ancrage redirige vers une destination appropriée, afin que les liens puissent être découverts.
Éléments d'image non dimensionnés : vérifiez si des width et height explicites sont définis sur les éléments d'image. Une taille d'image explicite peut réduire les décalages de mise en page et améliorer le CLS.
Évitez les animations non composées. Signale les animations non composites qui semblent saccadées et réduisent le CLS.
Écoute les événements unload. Signale l'événement unload. Envisagez plutôt d'utiliser les événements pagehide ou visibilitychange, car l'événement unload ne se déclenche pas de manière fiable.

Mise à jour des audits dans Lighthouse 6.2:

Supprimez les ressources JavaScript inutilisées. Lighthouse améliore désormais l'audit si une page contient des cartes sources JavaScript accessibles au public.

Problème Chromium: 772558

Abandon de la liste des "autres origines" dans le volet Service workers

Les outils de développement fournissent désormais un lien permettant d'afficher la liste complète des service workers d'autres origines dans un nouvel onglet de navigateur : chrome://serviceworker-internals/?devtools.

Auparavant, les outils de développement affichaient une liste imbriquée sous le panneau Application > Service workers (Nœuds de calcul de service).

Lien vers d'autres origines

Problème Chromium: 807440

Afficher le récapitulatif de la couverture pour les éléments filtrés

Les outils de développement recalculent et affichent désormais un résumé des informations de couverture de manière dynamique lorsque des filtres sont appliqués dans l'onglet Couverture. Auparavant, l'onglet Couverture affichait toujours un résumé de toutes les informations de couverture.

Dans l'exemple ci-dessous, notez comment le résumé indique initialement 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., puis 57 kB of 604 kB (10%) used so far. 546 kB unused. après l'application du filtrage CSS.

Récapitulatif de la couverture des éléments filtrés

Problème Chromium: 1061385

Nouvelle vue détaillée du frame dans le panneau "Application"

Les outils de développement affichent désormais une vue détaillée pour chaque image. Pour y accéder, cliquez sur un cadre dans le menu Frames du panneau Application.

Nouvelle vue détaillée du frame dans le panneau "Application"

Problème Chromium: 1093247

Détails du cadre pour les fenêtres ouvertes

Désormais, les outils de développement affichent également les fenêtres et les pop-ups ouverts sous l'arborescence des cadres. La vue détaillée du frame des fenêtres ouvertes inclut des informations de sécurité supplémentaires.

Détails du cadre de fenêtrage ouvert

Problème Chromium: 1107766

Informations sur la sécurité et l'isolation (COEP / COOP)

Les outils de développement affichent désormais le contexte sécurisé COEP (Cross-Origin-Embedder-Policy) et COOP (Cross-Origin-Opener-Policy) dans les détails du frame.

Informations sur la sécurité et l'isolation

D'autres informations de sécurité seront bientôt ajoutées à la vue détaillée de la trame.

Problème Chromium: 1051466

Mises à jour du panneau "Éléments et réseau"

Suggestion de couleur accessible dans le volet "Styles"

Les outils de développement proposent désormais des suggestions de couleurs pour le texte à faible contraste.

Dans l'exemple ci-dessous, h1 présente du texte à faible contraste. Pour résoudre ce problème, ouvrez le sélecteur de couleur de la propriété color dans le volet "Styles". Une fois que vous avez développé la section Contrast ratio (Rapport de contraste), les outils de développement proposent des suggestions de couleurs AA et AAA. Cliquez sur la couleur suggérée pour l'appliquer.

Problème Chromium: 1093227

Rétablir le volet Properties (Propriétés) du panneau "Elements"

Le volet "Propriétés" est de retour et était obsolète depuis Chrome 84. Dans une prochaine version des outils de développement, nous allons améliorer le workflow d'inspection des propriétés des éléments.

Volet des propriétés dans le panneau "Éléments"

Problème Chromium: 1105205, 1116085

Valeurs d'en-tête `X-Client-Data` lisibles dans le panneau "Network" (Réseau)

Lors de l'inspection d'une ressource réseau dans le panneau "Network", les outils de développement mettent désormais en forme toutes les valeurs d'en-tête X-Client-Data dans le volet "Headers" (En-têtes) sous forme de code.

L'en-tête HTTP X-Client-Data contient une liste d'ID de test et d'indicateurs Chrome activés dans votre navigateur. Les valeurs d'en-tête brutes ressemblent à des chaînes opaques, car elles sont des tampons de protocole sérialisés et encodés en base64. Pour rendre le contenu plus transparent pour les développeurs, les outils de développement affichent désormais les valeurs décodées.

Valeurs d'en-tête "X-Client-Data" lisibles par l'humain

Problème Chromium: 1103854

Saisie semi-automatique des polices personnalisées dans le volet "Styles"

Les polices importées sont désormais ajoutées à la liste de la saisie semi-automatique CSS lorsque vous modifiez la propriété font-family dans le volet Styles.

Dans cet exemple, 'Noto Sans' est une police personnalisée installée sur la machine locale. Il s'affiche dans la liste de saisie semi-automatique CSS. Auparavant, ce n'était pas le cas.

Saisie semi-automatique des polices personnalisées

Problème Chromium: 1106221

Affichage cohérent du type de ressource dans le panneau "Network"

Les outils de développement affichent désormais de manière cohérente le même type de ressource que la requête réseau d'origine et ajoute / Redirect à la valeur de la colonne Type lors de la redirection (état 302).

Auparavant, les outils de développement modifiaient parfois le type en Other.

Type de ressource de redirection de l'affichage

Problème Chromium: 997694

Effacer les boutons des panneaux "Éléments" et "Réseau"

Les zones de texte de filtre des volets Styles et Network, ainsi que la zone de texte de recherche DOM du panneau Éléments, comportent désormais des boutons Clear (Effacer). Cliquez sur Clear (Effacer) pour supprimer le texte saisi.

Effacer les boutons des panneaux "Éléments" et "Réseau"

Problème Chromium: 1067184

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.