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

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

Jecelyn Yeen

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

Point d'arrêt pour les cas de non-respect du type de confiance

Vous pouvez désormais définir des points d'arrêt et intercepter les exceptions sur les cas de non-respect des règles relatives aux types de confiance dans le panneau Sources.

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

Dans le panneau Sources, ouvrez le volet latéral du débogueur. Développez la section Points d'arrêt pour la violation CSP et cochez la case Violations des types de confiance pour suspendre les exceptions. Essayez par vous-même à l'aide de cette page de démonstration.

Point d'arrêt pour les cas de non-respect du type de confiance

Problème Chromium: 1142804

Problème de lien dans l'onglet "Problèmes" du panneau "Sources"

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

Problème de lien dans l'onglet "Problèmes" du panneau "Sources"

Problème Chromium: 1150883

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

Vous pouvez désormais faire des captures d'écran d'un nœud complet, y compris du contenu en dessous de la ligne de flottaison. Auparavant, la capture d'écran était coupée pour le contenu non visible dans la fenêtre d'affichage. Les captures d'écran en pleine page sont désormais exactes aussi.

Dans le panneau Éléments, effectuez un clic droit sur un élément, puis sélectionnez Capturer la capture d'écran du nœud.

Effectuer une capture d'écran du 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 Token à l'aide du nouvel onglet Trust Tokens (Jetons de confiance).

Le jeton de confiance 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.

D'autres fonctionnalités de débogage seront disponibles 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 utilise maintenant 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 LCP (Largest Contentful Paint). Audits si l'image utilisée par l'élément LCP est préchargée afin d'améliorer votre durée LCP.
Problèmes consignés dans le panneau Issues Indique une liste de problèmes non résolus dans le panneau Issues.
Progressive Web Apps (PWA) : La catégorie PWA a assez changé.
Le groupe Installable (Installable) est désormais entièrement alimenté par les vérifications de capacité qui appliquent les critères d'installation de Chrome. Il s'agit des 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 le protocole HTTPS" est désormais inclus dans l'audit clé "Exigences d'installation".
- Le groupe Rapide et fiable est supprimé. Étant donné que l'audit "Exigences d'installation" remanié inclut la vérification de la capacité hors connexion, l'audit "page actuelle et start_url répondent avec 200 quand hors connexion" a été supprimé. 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 des éléments

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

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

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

Utilisez la pseudo-classe :target pour appliquer un style à l'élément lorsque le hachage de l'URL et l'ID d'un élément sont identiques. Essayez par vous-même cette démonstration. 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 vers l'élément dupliqué

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

Effectuez un clic droit sur un élément du panneau Éléments, puis sélectionnez Dupliquer l'élément. Un nouvel élément sera créé en dessous.

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

Mac: Shift + Option + ⬇️
Windows/ 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

Vous pouvez désormais copier les propriétés CSS plus rapidement grâce à quelques nouveaux raccourcis.

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

Options de copie pour la classe CSS:

Sélecteur de copie : 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.

Options de copie pour la propriété CSS:

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

Problème Chromium: 1152391

Mises à jour des cookies

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

Vous pouvez désormais choisir d'afficher la valeur des cookies décodés par 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é.

Possibilité d'afficher les cookies décodés par URL

Problème Chromium: 997625

Effacer 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, 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.

Effacer 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 du site dans le volet Stockage, les outils de développement n'effacent désormais que les cookies propriétaires par défaut. Activez l'option y compris les cookies tiers pour effacer également les cookies tiers.

Possibilité d'effacer les cookies tiers

Problème Chromium: 1012337

Modifier les hints client user-agent pour les appareils personnalisés

Vous pouvez désormais modifier les hints client user-agent pour les appareils personnalisés.

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

Modifier les hints client user-agent

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

Problème Chromium: 1073909

Mises à jour du panneau "Network"

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

Les outils de développement conservent le paramètre "Enregistrer le journal réseau". Auparavant, les outils de développement réinitialisaient le choix de l'utilisateur chaque fois qu'une page s'actualise.

Enregistrer le journal réseau

Problème Chromium: 1122580

Afficher les connexions WebTransport dans le panneau "Network"

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

Connexions WebTransport

WebTransport est une nouvelle API offrant une messagerie client-serveur bidirectionnelle à 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

Remplacement du nom "En ligne" par "Aucune limitation"

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

Enregistrer le journal réseau

Problème Chromium: 1028078

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

Nouveaux raccourcis pour copier l'objet dans le panneau "Console" et "Sources"

Vous pouvez désormais copier des valeurs d'objet à l'aide des nouveaux raccourcis du panneau "Console" et "Sources". Cela est pratique, en particulier lorsque vous avez un objet volumineux (par exemple, un long tableau) à copier.

Copier l'objet dans la console

Copier l'objet dans le panneau "Sources"

Problèmes Chromium: 1149859, 1148353

Nouveaux raccourcis pour copier le nom des fichiers dans les panneaux "Sources" et "Styles"

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

un fichier dans le panneau Sources ;
Nom de fichier figurant 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 "Sources"

Copier le nom du fichier dans le volet "Styles"

Problème Chromium: 1155120

Mises à jour de la vue des détails du frame

Nouvelles informations sur les service workers dans la vue des détails du frame

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

Dans le panneau Application, développez un cadre avec des 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 des détails du frame

Problème Chromium: 1122507

Mesurer les informations sur la mémoire dans la vue "Détails du frame"

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

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

Mesurer la mémoire

Problème Chromium: 1139899

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

Pour améliorer un message de problème, accédez à l'onglet Problèmes depuis la console ou cliquez sur Plus de paramètres > Plus d'outils > Problèmes > pour ouvrir l'onglet Problèmes. Développez un message lié au problème, cliquez sur Le message vous est-il utile ?, puis donnez votre avis 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 Span pour basculer entre les positions écran unique ou plié, et double écran ou déplié.

Vous pouvez également activer les fonctionnalités expérimentales de la plate-forme Web pour accéder à la nouvelle fonctionnalité screen-spanning de média CSS et à l'API JavaScript getWindowSegments. L'icône expérimental 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 le double écran

Problème Chromium: 1054281

Fonctionnalités expérimentales

Automatiser les tests des navigateurs 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 facilite l'automatisation des tests du navigateur. Puppeteer est une bibliothèque Node.js qui fournit une API de haut niveau permettant de 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 au fichier en conséquence. 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 ce test en est encore à ses débuts. Nous prévoyons d'améliorer et d'étendre les fonctionnalités de l'Enregistreur au fil du temps.

Flûte à bec Puppeteer

Problème Chromium: 1144127

Éditeur de polices dans le volet "Styles"

Le nouvel éditeur de polices est un éditeur de pop-over situé dans le volet Styles. Il regroupe les propriétés liées aux polices et vous aide à trouver la typographie idéale pour votre page Web.

Le pop-over fournit une interface utilisateur propre permettant de manipuler dynamiquement la typographie avec une série de types d'entrée intuitifs.

Éditeur de polices dans le volet "Styles"

Problème Chromium: 1093229

Outils de débogage CSS Flexbox

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

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

Flexbox

Problème Chromium: 1139949

Nouvel onglet "Non-respect de CSP"

Consultez tous les cas de non-respect de la Content Security Policy (CSP) en un coup d'œil dans le nouvel onglet Non-respect de la CSP. Ce nouvel onglet est un test qui devrait faciliter l'utilisation de pages Web présentant un grand nombre de violations de CSP et de Trusted Type.

Onglet "Cas de non-respect CSP"

Problème Chromium: 1137837

Nouveau calcul du contraste des couleurs : algorithme APCA (Advanced Perceptual Contrast Algorithm)

L'algorithme avancé de contraste perceptuel (APCA) remplace le rapport de contraste des directives AA/AAA dans le sélecteur de couleur.

L'APCA est une nouvelle méthode de calcul du contraste basée sur des recherches modernes sur la perception des couleurs. Par rapport aux directives 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 légèreté perçue entre le texte et l'arrière-plan) et du contexte (lumière ambiante, environnement, objectif du texte).

APCA dans le sélecteur de couleur

L'exemple montre que le seuil de l'APCA est de 38%. Le rapport de contraste doit être égal ou supérieur à la valeur indiquée. Cette valeur est calculée en fonction de l'épaisseur et de la taille de la police, conformément à ce tableau de conversion de l'APCA.

Problème Chromium: 1121900

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.