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

Panneau "Nouveau média"

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

Avant l'apparition du nouveau panneau multimédia dans les outils de développement, les informations de journalisation et de débogage concernant les lecteurs vidéo pouvaient être trouvé dans chrome://media-internals.

Le nouveau panneau "Multimédia" offre un moyen plus simple d'afficher les événements, les journaux, les propriétés et la chronologie des frames dans le même onglet du navigateur que le lecteur vidéo lui-même. Vous pouvez visionner le flux vidéo en direct les problèmes potentiels plus rapidement (par exemple, pourquoi des pertes de frames se produisent, pourquoi JavaScript interagit avec le joueur 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 cliquant avec le bouton droit sur l'élément et en sélectionnez Capture node screenshot (Faire une capture d'écran du nœud).

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.

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

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 polices manquantes local() sources dans @font-face règles.

Par exemple, lorsque la police "Rubik" est installé sur votre appareil et utilisé par la règle @font-face src 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 à partir de le réseau.

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 à l'état inactif. des modifications. Vous pouvez désormais utiliser les outils de développement pour émuler les changements d'état de veille dans l'onglet Sensors (Capteurs) pour les l'état de l'utilisateur et l'état de l'écran au lieu d'attendre que l'état réel d'inactivité change. Vous pouvez ouvrir l'onglet Sensors (Capteurs) du tiroir.

Problème Chromium: 1090802

Émuler prefers-reduced-data

La requête média prefers-reduced-data détecte si l'utilisateur préfère être diffusé en alternance le contenu qui utilise moins de données pour le rendu de la page.

Vous pouvez maintenant utiliser les outils de développement pour émuler la requête média prefers-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 le nouveau les 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 des modifications.

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 en identifiant les pires facteurs du retard de saisie.
• Les liens sont explorables. Vérifiez si l'attribut href des éléments d'ancrage renvoie vers un lien approprié pour que les utilisateurs puissent découvrir les liens.
• É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éduire le CLS.
• Écoute les événements unload. Signale l'événement unload. Envisagez d'utiliser la méthode 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 comporte les cartes sources JavaScript publiquement accessibles.

Problème Chromium: 772558

Abandon 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 une nouvelle onglet du navigateur - chrome://serviceworker-internals/?devtools.

Auparavant, les outils de développement affichaient une liste imbriquée sous le panneau Application > Service workers volet.

Problème Chromium: 807440

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

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

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

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. Vous pouvez y accéder en cliquant sur un cadre sous Frames (Images). 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. Vue détaillée du cadre des fenêtres ouvertes contiennent des informations de sécurité supplémentaires.

Problème Chromium: 1107766

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

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

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 le problème, ouvrez le sélecteur de couleur de 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 et les suggestions de couleurs 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.

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 X-Client-Data les valeurs d'en-tête dans le volet "Headers" (En-têtes) sous forme de code.

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

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 des fonctionnalités de saisie semi-automatique CSS lorsque vous modifiez 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 complète CSS. Auparavant, ce n'était pas le cas.

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 initiale. 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.

Problème Chromium: 997694

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

Les zones de texte de filtre des volets Styles et Réseau, ainsi que le texte de recherche DOM du panneau Éléments, vous disposez désormais de boutons Effacer. Cliquez sur Effacer pour supprimer le texte vous avez une entrée.

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 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement