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

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

Jecelyn Yeen

Twitter GitHub Page d'accueil

Nouveau panneau multimédia

Les outils de développement affichent désormais les informations des 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 "Médias" 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 visionner le flux vidéo 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

Captures d'écran des 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 contenus en effectuant un clic droit sur l'élément, puis en sélectionnant Capture node screenshot (Capture d'écran du nœud).

Captures d'écran des nœuds

Problème Chromium: 1100253

Mise à 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 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è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 vous permet de:

Déboguer et mesurer les performances de chargement et l'optimisation des polices Web
Vérifiez l'exactitude de vos règles CSS @font-face
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) au lieu d'attendre le changement de l'état d'inactivité réel. 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 que la page s'affiche.

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

Émuler préfères-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 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 utilise désormais la version 6.2 de Lighthouse. Consultez les notes de version pour obtenir la liste complète des modifications.

Modifier 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 délai d'entrée.
Les liens peuvent être explorés. Vérifiez que l'attribut href des éléments d'ancrage renvoie vers une destination appropriée afin 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. Indique les animations non composées 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 "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 > 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, vous remarquerez 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 avoir appliqué le 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 des frames des fenêtres ouvertes contient 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é, les règles COEP (Cross-Origin-Embedder-Policy) et les règles d'ouverture multi-origines (COOP) dans les détails du frame.

Informations sur la sécurité et l'isolation

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

Problème Chromium: 1051466

Mises à jour du panneau "Network" et des éléments

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 un 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 améliorerons 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 "Network"

Lors de l'inspection d'une ressource réseau dans le panneau "Network" (Réseau), les outils de développement mettent à présent en forme 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 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 il s'agit de tampons de protocole encodés en base64. Afin de 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 utiliser des polices personnalisées dans le volet "Styles"

Les polices importées sont désormais ajoutées à la liste de saisie semi-automatique CSS lors de la modification de 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 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 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 d'affichage

Problème Chromium: 997694

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

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

Supprimer les boutons des 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 même que vos utilisateurs 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 le message, ou de tout autre sujet lié aux outils de développement.

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