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

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

Jecelyn Yeen

Aide au débogage pour les cas de non-respect des Trusted Types

Point d'arrêt sur les cas de non-respect des types de confiance

Vous pouvez désormais définir des points d'arrêt et intercepter des exceptions en cas de non-respect des règles de type Trusted dans le panneau Sources.

L'API Trusted Types vous aide à prévenir les failles de script intersites basé sur le DOM. Pour découvrir comment écrire, examiner et gérer des applications exemptes de failles DOM XSS avec les Trusted Types, cliquez ici.

Dans le panneau Sources, ouvrez le volet de la barre latérale Debugger. Développez la section Points d'arrêt de non-respect des CSP et cochez la case Cas de non-respect des types de confiance pour suspendre les exceptions. Essayez par vous-même en suivant cette page de démonstration.

Point d'arrêt sur les cas de non-respect des types de confiance

Problème Chromium: 1142804

Associez le problème dans le panneau "Sources" à l'onglet "Problèmes"

Le panneau Sources affiche désormais une icône d'avertissement à côté de la ligne qui ne respecte pas le type de confiance. Pointez dessus pour prévisualiser l'exception. Cliquez dessus pour développer l'onglet Issues (Problèmes). Il fournit plus de détails sur les exceptions et des conseils pour les résoudre.

Associez le problème dans le panneau "Sources" à l'onglet "Problèmes"

Problème Chromium: 1150883

Effectuer une capture d'écran d'un nœud au-delà de la fenêtre d'affichage

Vous pouvez désormais effectuer des captures d'écran pour un nœud complet, y compris pour le contenu en dessous de la ligne de flottaison. Auparavant, la capture d'écran était tronquée, car le contenu n'était pas visible dans la fenêtre d'affichage. Les captures d'écran pleine page sont maintenant aussi précises.

Dans le panneau Elements (Éléments), effectuez un clic droit sur un élément, puis sélectionnez Capture node screenshot (Capturer le nœud).

Effectuer une capture d'écran d'un nœud au-delà de la fenêtre d'affichage

Problème Chromium: 1003629

Nouvel onglet "Jetons de confiance" pour les requêtes réseau

Inspectez les requêtes réseau Trust Tokens à l'aide du nouvel onglet Trust Tokens (Jetons de confiance).

Trust Token est une nouvelle API qui permet de lutter contre la fraude et de distinguer les bots des humains, sans suivi passif. Découvrez comment faire vos premiers pas avec les jetons de confiance.

Une assistance au débogage supplémentaire sera disponible dans les prochaines versions.

Nouvel onglet "Jeton de confiance" pour les requêtes réseau

Problème Chromium: 1126824

Lighthouse 7 dans le panneau Lighthouse

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

Lighthouse 7 dans le panneau Lighthouse

Nouveaux audits dans Lighthouse 7:

Précharger l'image Largest Contentful Paint (LCP) Audite si l'image utilisée par l'élément LCP est préchargée afin d'améliorer la durée de votre LCP.
Problèmes consignés dans le panneau Issues. Indique la liste des problèmes non résolus dans le panneau Issues.
Progressive Web Apps (PWA) : La catégorie des PWA a changé de manière assez importante.
Le groupe Installable est désormais entièrement alimenté par les vérifications de capacité qui activent les critères d'installation de Chrome. Ce sont les mêmes signaux que dans le volet Manifest.
- L'audit "Enregistrement d'un service worker" est déplacé vers le groupe Optimisé pour les PWA, et l'audit "Utilise HTTPS" est désormais inclus dans l'audit clé "Exigences concernant l'installation".
- Le groupe Rapide et fiable est supprimé. Étant donné que l'audit des "exigences d'installation" remanié inclut une vérification de la fonctionnalité hors connexion, l'audit "page actuelle et start_url" renvoient un code 200 lorsqu'ils sont hors connexion. L'audit "Le chargement de la page est suffisamment rapide sur le réseau mobile" a également été supprimé.

Problème Chromium: 772558

Mises à jour du panneau "Elements"

Prise en charge du forçage de l'état CSS `:target`

Vous pouvez maintenant utiliser les outils de développement pour forcer et inspecter l'état CSS :target.

Dans le panneau Éléments, sélectionnez un élément et définissez son état. Cochez la case :target pour forcer et inspecter les styles.

Utilisez la pseudo-classe :target pour styliser un élément lorsque le hachage de l'URL et l'ID d'un élément sont identiques. Regardez cette démonstration pour l'essayer par vous-même. Cette nouvelle fonctionnalité des outils de développement vous permet de tester ces styles sans avoir à modifier manuellement l'URL en permanence.

forcer l'état CSS ":target"

Problème Chromium: 1156628

Nouveau raccourci pour dupliquer l'élément

Utilisez le nouveau raccourci Dupliquer l'élément pour cloner un élément instantanément.

Effectuez un clic droit sur un élément dans le panneau Éléments, puis sélectionnez Dupliquer l'élément. Un nouvel élément sera créé sous celui-ci.

Vous pouvez également dupliquer un élément à l'aide de raccourcis clavier:

Mac: Shift + Option + ⬇️
Fenêtre/ Linux: Shift + Alt + ⬇️

Élément en double

Problèmes Chromium: 1150797, 1150797

Sélecteurs de couleur pour les propriétés CSS personnalisées

Le volet Styles affiche désormais des sélecteurs de couleur pour les propriétés CSS personnalisées.

En outre, vous pouvez maintenir la touche Shift enfoncée et cliquer sur le sélecteur de couleur pour parcourir les représentations RVBA, HSLA et hexadécimales de la valeur de couleur.

Sélecteurs de couleur pour les propriétés CSS personnalisées

Problème Chromium: 1147016

Nouveaux raccourcis pour copier les propriétés CSS

Quelques nouveaux raccourcis vous permettent désormais de copier des propriétés CSS plus rapidement.

Dans le panneau Éléments, sélectionnez un élément. Ensuite, effectuez un clic droit sur une classe CSS ou une propriété CSS dans le volet Styles pour copier la valeur.

Nouveaux raccourcis pour copier les propriétés CSS

Copier les options de la classe CSS:

Copier le sélecteur : Copiez le nom du sélecteur actuel.
Copier la règle. Copiez la règle du sélecteur actuel.
Copier toutes les déclarations: copie toutes les déclarations sous la règle actuelle, y compris les propriétés non valides et avec préfixe.

Copier les options de la propriété CSS:

Copier la déclaration : Copiez la déclaration de la ligne active.
Copier la propriété : Copiez la propriété de la ligne actuelle.
Copier la valeur: copie la valeur de la ligne actuelle.

Problème Chromium: 1152391

Mises à jour des cookies

Nouvelle option pour afficher les cookies décodés par l'URL

Vous pouvez maintenant choisir d'afficher la valeur des cookies décodés par l'URL dans le volet Cookies.

Accédez au panneau Application et sélectionnez le volet Cookies. Sélectionnez un cookie de la liste. Cochez la nouvelle case Afficher l'URL décodée pour afficher le cookie décodé.

Option permettant d'afficher les cookies décodés via l'URL

Problème Chromium: 997625

Supprimer uniquement les cookies visibles

Le bouton Effacer tous les cookies du volet "Cookies" est désormais remplacé par le bouton Effacer les cookies filtrés.

Dans le panneau Application > Cookies, saisissez du texte dans la zone de texte pour filtrer les cookies. Dans notre exemple ici, nous filtrons la liste par "PREF". Cliquez sur le bouton Effacer les cookies filtrés pour supprimer les cookies visibles. Effacez le texte du filtre. Les autres cookies restent dans la liste. Auparavant, vous aviez uniquement la possibilité de supprimer tous les cookies.

Supprimer uniquement les cookies visibles

Problème Chromium: 978059

Nouvelle option pour effacer les cookies tiers dans le volet "Stockage"

Lorsque vous effacez les données des sites dans le volet Storage (Stockage), les outils de développement n'effacent désormais que les cookies propriétaires par défaut. Activez y compris les cookies tiers pour effacer également les cookies tiers.

Possibilité de supprimer les cookies tiers

Problème Chromium: 1012337

Modifier les indicateurs client User-Agent pour les appareils personnalisés

Vous pouvez désormais modifier les indicateurs client User-Agent pour les appareils personnalisés.

Accédez à Paramètres > Appareils, puis cliquez sur Ajouter un appareil personnalisé. Développez la section Indices client user-agent pour modifier les indicateurs client.

Modifier les indicateurs client User-Agent

Les indicateurs client user-agent constituent une alternative à la chaîne user-agent. Ils permettent aux développeurs d'accéder à des informations sur le navigateur d'un utilisateur de manière ergonomique et protégeant la confidentialité. Pour en savoir plus sur les indicateurs client User-Agent, consultez la page web.dev/user-agent-client-hints/.

Problème Chromium: 1073909

Mises à jour du panneau "Network"

Conserver le paramètre "Enregistrer le journal réseau"

Désormais, les outils de développement conservent le paramètre "Enregistrer un journal réseau". Auparavant, les outils de développement réinitialisaient le choix de l'utilisateur à chaque actualisation d'une page.

Enregistrer un journal réseau

Problème Chromium: 1122580

Afficher les connexions WebTransport dans le panneau "Network" (Réseau)

Le panneau "Network" (Réseau) affiche désormais les connexions WebTransport.

Connexions WebTransport

WebTransport est une nouvelle API offrant une messagerie client-serveur, bidirectionnelle et à faible latence. Pour en savoir plus sur ses cas d'utilisation et découvrir comment envoyer des commentaires sur l'avenir de l'implémentation, rendez-vous sur web.dev/webtransport/.

Problème Chromium: 1152290

"Online" a été renommé "No throttling" (Pas de limitation).

L'option d'émulation de réseau "Online" est maintenant renommée "No Throttling".

Enregistrer un journal réseau

Problème Chromium: 1028078

Nouvelles options de copie dans la console, les panneaux "Sources" et le volet "Styles"

Nouveaux raccourcis pour copier des objets dans la console et le panneau des sources

Vous pouvez désormais copier des valeurs d'objet à l'aide des nouveaux raccourcis de la console et du panneau des sources. Cela s'avère pratique, surtout lorsque vous avez un objet volumineux (par exemple, un long tableau) à copier.

Copier l'objet dans la console

Copier l'objet dans le panneau des sources

Problèmes Chromium: 1149859, 1148353

Nouveaux raccourcis pour copier le nom du fichier dans les panneaux "Sources" et "Styles"

Vous pouvez maintenant copier le nom du fichier en effectuant un clic droit sur:

un fichier dans le panneau Sources ; ou
le nom du fichier dans le volet Styles du panneau Éléments.

Sélectionnez Copier le nom du fichier dans le menu contextuel pour copier le nom du fichier.

Copier le nom du fichier dans le panneau des sources

Copier le nom du fichier dans le volet "Styles"

Problème Chromium: 1155120

Mises à jour de la vue détaillée du frame

Nouvelles informations sur les service workers dans la vue détaillée du frame

Les outils de développement affichent désormais les service workers dédiés sous le cadre qui les crée.

Dans le panneau Application, développez un cadre avec les service workers, puis sélectionnez-en un sous l'arborescence Service Workers pour afficher les détails.

Informations sur les service workers dans la vue détaillée du frame

Problème Chromium: 1122507

Mesurer les informations sur la mémoire dans la vue détaillée de l'image

L'état de l'API performance.measureMemory() s'affiche désormais dans la section Disponibilité de l'API.

La nouvelle API performance.measureMemory() estime l'utilisation de la mémoire pour l'ensemble de la page Web. Pour savoir comment surveiller l'utilisation totale de mémoire de votre page Web avec cette nouvelle API, consultez cet article.

Mesurer la mémoire

Problème Chromium: 1139899

Envoyer des commentaires depuis l'onglet "Problèmes"

Si vous souhaitez améliorer un message concernant un problème, accédez à l'onglet Problèmes depuis la console ou Plus de paramètres > Plus d'outils > Problèmes, puis ouvrez l'onglet Problèmes. Développez un message concernant un problème, cliquez sur Le message du problème vous est-il utile ?, puis envoyez vos commentaires dans le pop-up.

Lien de commentaires sur le problème

Images supprimées dans le panneau "Performances"

Lors de l'analyse des performances de chargement dans le panneau "Performances", la section Frames marque désormais les frames supprimés en rouge. Pointez dessus pour connaître la fréquence d'images.

Cadres supprimés

Problème Chromium: 1075865

Émuler les appareils pliables et double écran en mode Appareil

Vous pouvez désormais émuler des appareils à double écran et pliables dans les outils de développement.

Après avoir activé la barre d'outils de l'appareil, sélectionnez l'un des appareils suivants: Surface Duo ou Samsung Galaxy Fold.

Cliquez sur la nouvelle icône représentant un span pour basculer entre les positions à écran unique, pliée et double écran ou dépliée.

Vous pouvez également activer les fonctionnalités expérimentales de la plate-forme Web pour accéder à la nouvelle fonctionnalité CSS Media screen-spanning et à l'API JavaScript getWindowSegments. L'icône expérimentale affiche l'état de l'indicateur Experimental Web Platform features (Fonctionnalités expérimentales de la plate-forme Web). L'icône est mise en surbrillance lorsque l'indicateur est activé. Accédez à chrome://flags et activez/désactivez l'indicateur.

Émuler l'affichage double écran

Problème Chromium: 1054281

Fonctionnalités expérimentales

Automatiser les tests de navigateur avec Puppeteer Recorder

Les outils de développement peuvent désormais générer des scripts Puppeteer en fonction de votre interaction avec le navigateur, ce qui vous permet d'automatiser plus facilement les tests du navigateur. Puppeteer est une bibliothèque Node.js qui fournit une API de haut niveau pour contrôler Chrome ou Chromium via le protocole DevTools.

Accédez à cette page de démonstration. Ouvrez le panneau Sources dans les outils de développement. Sélectionnez l'onglet Enregistrement dans le volet de gauche. Ajoutez un enregistrement et nommez le fichier (par exemple, test01.js).

Cliquez sur le bouton Record (Enregistrer) en bas pour commencer à enregistrer l'interaction. Essayez de remplir le formulaire à l'écran. Notez que les commandes Puppeteer sont ajoutées en conséquence au fichier. Cliquez à nouveau sur le bouton Record (Enregistrer) pour arrêter l'enregistrement.

Pour exécuter le script, suivez le guide de démarrage sur le site officiel de Puppeteer.

Veuillez noter que cette expérience n'en est qu'à ses débuts. Nous prévoyons d'améliorer et de développer la fonctionnalité Enregistreur au fil du temps.

Enregistreur de marionnettes

Problème Chromium: 1144127

Éditeur de police dans le volet "Styles"

Le nouvel éditeur de police est un éditeur contextuel dans le volet Styles qui contient les propriétés liées aux polices. Il vous aide à trouver la typographie idéale pour votre page Web.

La fenêtre contextuelle fournit une interface utilisateur épurée pour manipuler dynamiquement la typographie avec une série de types d'entrée intuitifs.

Éditeur de police dans le volet "Styles"

Problème Chromium: 1093229

Outils de débogage CSS Flexbox

Les outils de développement ont ajouté une compatibilité expérimentale pour le débogage Flexbox depuis la dernière version.

Les outils de développement tracent désormais une ligne directrice pour vous aider à mieux visualiser la propriété CSS align-items. La propriété CSS gap est également prise en charge. Dans notre exemple, nous utilisons le CSS gap: 12px;. Notez le modèle de hachures pour chaque écart.

Flexbox

Problème Chromium: 1139949

Nouvel onglet "Cas de non-respect des règles CSP"

Consultez d'un coup d'œil tous les cas de non-respect des Content Security Policy (CSP) dans le nouvel onglet Cas de non-respect des CSP. Ce nouvel onglet est un test qui devrait faciliter l'utilisation des pages Web comportant un grand nombre de cas de non-respect des règles CSP et des types de confiance.

Onglet "Cas de non-respect des règles CSP"

Problème Chromium: 1137837

Nouveau calcul du contraste des couleurs : algorithme avancé de contraste perceptuel (APCA)

L'algorithme Advanced Perceptual Contrast Algorithm (APCA) remplace le rapport de contraste des directives AA/AAA dans le sélecteur de couleurs.

L'APCA est une nouvelle méthode de calcul du contraste basée sur des recherches modernes sur la perception des couleurs. Comparée aux directives de l'AA/AAA, l'APCA dépend davantage du contexte. Le contraste est calculé en fonction des propriétés spatiales du texte (épaisseur et taille de la police), de la couleur (différence de luminosité perçue entre le texte et l'arrière-plan) et du contexte (lumière ambiante, environnement et finalité prévue du texte).

APCA dans le sélecteur de couleur

Dans cet exemple, le seuil de l'APCA est de 38%. Le rapport de contraste doit être supérieur ou égal à la valeur répertoriée. Cette valeur est calculée en fonction de l'épaisseur et de la taille de la police, en se référant à ce tableau de conversion APCA.

Problème Chromium: 1121900

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.