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

Nouveau panneau "Média"

Les Outils de développement affichent désormais les informations sur les lecteurs multimédias dans le panneau "Média".

Avant le nouveau panneau "Média" des 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 "Supports multimédias" permet d'afficher plus facilement les événements, les journaux, les propriétés et une chronologie des décodages de frames dans le même onglet de navigateur que le lecteur vidéo lui-même. Vous pouvez afficher et inspecter en direct les problèmes potentiels plus rapidement (par exemple, pourquoi des images sont supprimées ou pourquoi JavaScript interagit avec le lecteur de manière inattendue).

Problème Chromium : 1018414

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

Vous pouvez désormais capturer 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 et en sélectionnant Capture d'écran du nœud.

Problème Chromium : 1100253

Modifications apportées à 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". Cochez la nouvelle case Inclure les problèmes des cookies tiers pour les afficher.

Problèmes Chromium : 1096481, 1068116, 1080589

Émuler les polices locales manquantes

Ouvrez l'onglet Rendering (Rendu) et utilisez la nouvelle fonctionnalité Disable local fonts (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 à partir 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 de chargement et d'optimisation des polices Web
• Vérifier 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 des 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 inactif dans l'onglet Capteurs pour l'état de l'utilisateur et l'état de l'écran, au lieu d'attendre que l'état inactif réel change. Vous pouvez ouvrir l'onglet Capteurs à partir du panneau.

Problème Chromium : 1090802

Émuler prefers-reduced-data

La requête média prefers-reduced-data détecte si l'utilisateur préfère que du contenu alternatif lui soit proposé, en utilisant 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 média prefers-reduced-data.

Problème Chromium : 1096068

Compatibilité avec de nouvelles fonctionnalités JavaScript

Les outils de développement offrent désormais une meilleure compatibilité avec certaines des dernières fonctionnalités du langage JavaScript :

• Opérateurs d'affectation logique : les outils de développement sont désormais compatibles avec l'affectation logique grâce aux nouveaux opérateurs &&=, ||= et ??= dans les panneaux "Console" et "Sources".
• Mise en forme des séparateurs numériques : les outils pour les développeurs mettent désormais en forme 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 longues tâches 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 image de taille inconnue : vérifiez si une width et une height explicites sont définies sur les éléments 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éliorera désormais l'audit si une page comporte des mappages source JavaScript accessibles au public.

Problème Chromium : 772558

Arrêt de l'affichage 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 workers de service provenant 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 > volet Service workers.

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écapitulatif 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écapitulatif de toutes les informations sur la couverture.

Dans l'exemple ci-dessous, notez que le récapitulatif indique d'abord 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.

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

Problème Chromium : 1093247

Détails du cadre pour les fenêtres ouvertes

Les outils de développement affichent désormais les fenêtres / pop-ups ouverts sous l'arborescence des frames. La vue des détails du frame des fenêtres ouvertes inclut des informations de sécurité supplémentaires.

Problème Chromium : 1107766

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

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

D'autres informations sur la sécurité seront bientôt ajoutées à la vue des détails du frame.

Problème Chromium : 1051466

Modifications apportées aux panneaux "Éléments" et "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, h1 présente un texte à 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 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 volet Propriétés dans le panneau "Éléments"

Le volet "Propriétés" est de retour. Il avait été déprécié dans Chrome 84. Dans une future version des outils de développement, nous allons améliorer le workflow d'inspection des propriétés des éléments.

Problèmes Chromium : 1105205, 1116085

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

Lorsque vous inspectez une ressource réseau dans le panneau "Réseau", les outils de développement mettent désormais en forme les valeurs d'en-tête X-Client-Data dans le panneau "En-têtes" en tant que code.

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

Problème Chromium : 1103854

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

Les visages de police importés sont désormais ajoutés à 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 saisie semi-automatique CSS. Auparavant, ce n'était pas le cas.

Problème Chromium : 1106221

Afficher le type de ressource de manière cohérente 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 ajoutent / Redirect à la valeur de la colonne Type en cas de redirection (état 302).

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

Problème Chromium : 997694

Boutons "Effacer" dans les panneaux "Elements" et "Network"

Les zones de texte de filtre dans le volet Styles et le panneau Réseau, ainsi que la zone de texte de recherche DOM dans le panneau Éléments, disposent désormais de boutons Effacer. Si vous cliquez sur Effacer, tout le texte que vous avez saisi sera supprimé.

Problème Chromium : 1067184

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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 en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.