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

Panneau "Nouveaux médias"

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

Avant le nouveau panneau multimédia dans DevTools, les informations de journalisation et de débogage sur les lecteurs vidéo pouvaient être trouvées dans chrome://media-internals.

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

Problème Chromium: 1018414

Effectuer des captures d'écran de nœud via le menu contextuel du panneau "Éléments"

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

Par exemple, vous pouvez prendre une capture d'écran de la table des matières en effectuant un clic droit sur l'élément, puis en sélectionnant Capturer une capture d'écran du nœud.

Problème Chromium: 1100253

Mise à jour des onglets des 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". Cochez la nouvelle case Inclure les problèmes des cookies tiers pour les afficher.

Problèmes Chromium: 1096481, 1068116 et 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 comme police local(), Chrome utilise le fichier de police local de votre appareil.

Lorsque l'option Désactiver les polices locales est activée, DevTools ignore les polices local() et les extrait du réseau.

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

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

Désactiver les polices locales vous permet de:

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

Problème Chromium: 384968

Émuler des utilisateurs inactifs

L'API de détection d'inactivité 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 DevTools pour émuler les changements d'état d'inactivité dans l'onglet 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 Capteurs à partir du volet.

Problème Chromium: 1090802

Émuler prefers-reduced-data

La requête multimédia prefers-reduced-data détecte si l'utilisateur préfère recevoir un contenu de remplacement qui utilise moins de données pour l'affichage de la page.

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

Problème Chromium: 1096068

Compatibilité avec les 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 : DevTools prend désormais en charge l'attribution logique avec les nouveaux opérateurs &&=, ||= et ??= dans les panneaux "Console" et "Sources".
• Mise en forme des séparateurs numériques : DevTools affiche 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. Pour obtenir la liste complète des modifications, consultez les notes de version.

Nouveaux audits dans Lighthouse 6.2:

• Évitez les tâches longues dans le thread principal. Indique les tâches les plus longues du thread principal, ce qui est utile pour identifier celles qui entraînent le plus de retard.
• Les liens peuvent être explorés. Vérifiez si l'attribut href des éléments d'ancrage pointe vers une destination appropriée, pour que les liens puissent être détectés.
• É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 composées qui semblent saccadées et réduisent le CLS.
• Écoute les événements unload. Signale l'événement unload. Nous vous conseillons d'utiliser à la place les événements pagehide ou visibilitychange, car l'événement unload ne se déclenche pas de manière fiable.

Audits mis à jour dans Lighthouse 6.2:

• Supprimez le code JavaScript inutilisé. Lighthouse améliore désormais l'audit si une page comporte des cartes sources JavaScript accessibles au public.

Problème Chromium: 772558

Abandon de la liste "Autres origines" dans le volet "Service workers"

DevTools fournit désormais un lien permettant d'afficher la liste complète des services workers d'autres origines dans un nouvel onglet de navigateur : chrome://serviceworker-internals/?devtools.

Auparavant, DevTools affichait une liste imbriquée sous le panneau Application > volet Service workers.

Problème Chromium: 807440

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

DevTools calcule désormais et affiche dynamiquement un récapitulatif des informations de couverture lorsque des filtres sont appliqués dans l'onglet Couverture. Auparavant, l'onglet Couverture affichait toujours un résumé de toutes les informations sur la 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. une fois le filtrage CSS appliqué.

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 dans le menu Cadres du panneau Application.

Problème Chromium: 1093247

Informations sur le cadre des fenêtres ouvertes

Les outils de développement affichent désormais également les fenêtres / pop-ups ouvertes sous l'arborescence des cadres. La vue d'informations sur le cadre des fenêtres ouvertes inclut des informations de sécurité supplémentaires.

Problème Chromium: 1107766

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

Les outils pour les développeurs affichent désormais le contexte sécurisé, COEP (Cross-Origin-Embedder-Policy) 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'informations sur le cadre.

Problème Chromium: 1051466

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

Suggestion de couleur accessible dans le volet "Styles"

Les outils de développement vous suggèrent désormais des couleurs pour le texte à faible contraste.

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

Problème Chromium: 1093227

Rétablir le panneau Propriétés dans le panneau "Éléments"

Le volet "Propriétés" est de retour, alors qu'il était obsolète dans Chrome 84. Dans une prochaine version de DevTools, 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 par l'utilisateur dans le panneau "Network" (Réseau)

Lorsque vous inspectez une ressource réseau dans le panneau "Network" (Réseau), DevTools formate désormais 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 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 buffers de protocole sérialisés et encodés en base64. Pour rendre les contenus plus transparents pour les développeurs, DevTools affiche désormais les valeurs décodées.

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 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 finalisation du CSS. Ce n'était pas le cas auparavant.

Problème Chromium: 1106221

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

DevTools affiche 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 d'une redirection (état 302).

Auparavant, DevTools remplaçait parfois le type par Other.

Problème Chromium: 997694

Boutons de suppression dans les panneaux "Elements" et "Network"

Les boutons Effacer sont désormais disponibles dans les zones de texte de filtrage des panneaux Styles et Réseau, ainsi que dans la zone de texte de recherche DOM du panneau Éléments. Cliquez sur Effacer pour supprimer tout texte saisi.

Problème Chromium: 1067184

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.