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

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

Jecelyn Yeen

Nouveau panneau multimédia

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

Nouveau panneau multimédia

Avant le nouveau panneau multimédia dans les outils de développement, les informations de journalisation et de débogage des 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 une chronologie des décodages d'images dans le même onglet du navigateur que le lecteur vidéo. Vous pouvez regarder en direct et inspecter plus rapidement les problèmes potentiels (par exemple, pourquoi une perte de frames se produit ou pourquoi JavaScript interagit avec le lecteur de manière inattendue).

Problème Chromium: 1018414

Effectuer des captures d'écran de nœuds 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 "Elements".

Par exemple, vous pouvez effectuer 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 (Capturer le nœud).

Captures d'écran des nœuds

Problème Chromium: 1100253

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

La barre d'avertissement "Problèmes" du panneau de la console a été 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 liés aux cookies tiers pour les afficher.

case à cocher des problèmes liés aux cookies tiers

Problèmes Chromium: 1096481, 1068116, 1080589

Émuler les polices locales manquantes

Ouvrez l'onglet Rendu 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 comme 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èrent 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 lors du développement:

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

Désactiver les polices locales vous permet de:

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 l'état de l'écran au lieu d'attendre que l'état d'inactivité réel change. Vous pouvez ouvrir l'onglet Sensors (Capteurs) à partir du panneau.

É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

Prise en charge des nouvelles fonctionnalités JavaScript

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

Opérateurs d'attribution logique : les outils de développement sont désormais compatibles avec l'attribution logique avec les nouveaux opérateurs &&=, ||= et ??= dans les panneaux "Console" et "Sources".
Mise en forme des séparateurs numériques : les outils de développement affichent désormais correctement les séparateurs numériques dans le panneau "Sources".

Problèmes liés à Chromium: 1086817, 1080569

Lighthouse 6.2 dans le panneau Lighthouse

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

Supprimer la taille de l'image

Nouveaux audits dans Lighthouse 6.2:

Évitez les longues tâches de thread principal. Indique les tâches les plus longues sur le thread principal, ce qui est utile pour identifier les pires facteurs du retard d'entrée.
Les liens peuvent être explorés. Vérifiez si l'attribut href des éléments d'ancrage renvoie vers une destination appropriée, de sorte que les liens puissent être découverts.
Éléments d'image non dimensionnés : vérifiez si des éléments width et height explicites sont définis sur les éléments d'une image. La 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 composées qui semblent irrégulières et réduisent le CLS.
Écoute les événements unload. Signale l'événement unload. Envisagez d'utiliser plutôt 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 le code JavaScript inutilisé. Lighthouse améliore désormais l'audit si une page contient des cartes sources JavaScript accessibles publiquement.

Problème Chromium: 772558

Abandon de la liste "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 du navigateur : chrome://serviceworker-internals/?devtools.

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

Lien vers d'autres origines

Problème Chromium: 807440

Afficher un 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 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 que 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 pour les éléments filtrés

Problème Chromium: 1061385

Nouvelle vue des détails du frame dans le panneau "Application"

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

Nouvelle vue des détails du frame dans le panneau "Application"

Problème Chromium: 1093247

Détails du cadre des 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 cadre 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'isolement (COEP / COOP)

Les outils de développement affichent désormais un 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'isolement

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

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 fournissent désormais des suggestions de couleurs pour le texte à faible contraste.

Dans l'exemple ci-dessous, h1 présente du texte à faible contraste. Pour le résoudre, 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 fournissent 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. Il é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 du panneau "Elements"

Problème Chromium: 1105205, 1116085

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

Lors de l'inspection d'une ressource réseau dans le panneau "Network" (Réseau), les outils de développement mettent désormais en forme toutes les valeurs d'en-tête X-Client-Data du 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, car il s'agit de 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

Problème Chromium: 1103854

Utiliser la saisie semi-automatique pour les polices personnalisées dans le volet "Styles"

Les polices importées sont désormais ajoutées à la liste de 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. Elle s'affiche dans la liste d'achèvement CSS. Auparavant, ce n'était pas le cas.

Polices personnalisées avec saisie semi-automatique

Problème Chromium: 1106221

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

Les outils de développement affichent désormais systématiquement 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.

Afficher le type de ressource de redirection

Problème Chromium: 997694

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

Les zones de texte de filtre du volet Styles et du panneau Network (Réseau) ainsi que la zone de texte de recherche DOM du panneau Elements disposent désormais de boutons Clear (Effacer). Cliquez sur Clear (Effacer) pour supprimer tout texte saisi.

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

Problème Chromium: 1067184

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.