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

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

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

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

L'API Trusted Types vous aide à prévenir les failles de script intersites basé sur le DOM. Découvrez comment écrire, examiner et gérer des applications exemptes de failles DOM XSS avec les Trusted Types sur cette page.

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

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

Problème Chromium: 1142804

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), qui 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

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 situé 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 également précises.

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

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 des jetons de confiance à l'aide du nouvel onglet Trust Tokens (Jetons de confiance).

Trust Token est une nouvelle API qui aide à lutter contre la fraude et à distinguer les bots des vrais utilisateurs, 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 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 LCP (Largest Contentful Paint) : 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 s'appuie désormais entièrement sur les vérifications de capacité qui autorisent les critères d'installation de Chrome. Il s'agit des mêmes signaux que ceux visibles dans le volet du fichier manifeste.

    • L'audit "Enregistrement d'un service worker" est déplacé vers le groupe PWA optimisé, et l'audit "Utilise le protocole HTTPS" est à présent inclus dans l'audit clé des exigences d'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" répond avec 200 chiffres lorsque l'état 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 "Elements"

Possibilité de forcer l'état CSS :target

Vous pouvez désormais 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 activez/désactivez son état. Cochez la case :target pour forcer et inspecter les styles.

Utilisez la pseudo-classe :target pour styliser 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 pour dupliquer l'élément

Utilisez le nouveau raccourci Dupliquer un é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 les 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 la 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 maintenant 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

Copier les options de la classe CSS:

  • Copier le sélecteur : Copiez le nom actuel du sélecteur.
  • 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 active.
  • Copier la propriété : Copiez la propriété de la ligne active.
  • Copy value (Copier la valeur) : copie la valeur de la ligne active.

Problème Chromium: 1152391

Mises à jour des cookies

Nouvelle option pour afficher les cookies décodés en fonction de l'URL

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

Accédez au panneau Application, puis 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

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 > volet 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 pour que les autres cookies restent dans la liste. Auparavant, vous aviez uniquement la possibilité d'effacer tous les cookies.

Effacer uniquement les cookies visibles

Problème Chromium: 978059

Nouvelle option permettant de supprimer les cookies tiers dans le volet "Stockage"

Lors de la suppression des données des sites dans le volet Stockage, les outils de développement n'effacent désormais que les cookies propriétaires par défaut. Activez les cookies tiers pour les effacer également.

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 User-agent Client Hints (Indicateurs client user-agent) pour les modifier.

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 respectueuse de 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 "Réseau"

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

Les outils de développement conservent désormais 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 le 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 à faible latence et bidirectionnelle. Pour en savoir plus sur ses cas d'utilisation et sur l'envoi de commentaires sur l'avenir de l'implémentation, accédez à web.dev/webtransport/.

Problème Chromium: 1152290

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

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

Enregistrer le 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. Cette approche est pratique, surtout lorsque vous devez copier un objet volumineux (par exemple, un long tableau).

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 du fichier en effectuant un clic droit sur:

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

Pour copier le nom du fichier, sélectionnez Copy file name (Copier le nom du fichier) dans le menu contextuel.

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 détaillée du frame

Nouvelles informations sur les service workers dans la vue Détails 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 frame 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 sur le frame

Problème Chromium: 1122507

Mesurer les informations sur la mémoire dans la vue détaillée de la frame

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 la 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 Issues (Problèmes) depuis la Console ou cliquez sur More Settings > More tools > Issues (Plus d'outils > Problèmes) > pour ouvrir l'onglet Issues (Problèmes). Développez un message concernant un problème, cliquez sur Le message concernant le problème vous est-il utile ?, puis envoyez vos commentaires dans le pop-up.

Lien pour envoyer des 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.

Images supprimées

Problème Chromium: 1075865

Émuler un appareil pliable 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 en forme de span pour basculer entre les positions à écran unique ou 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 screen-spanning et à l'API JavaScript getWindowSegments. L'icône expérimentale affiche l'état de l'indicateur des 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 attribuez un nom au 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 marionnettiste

Problème Chromium: 1144127

Éditeur de police dans le volet "Styles"

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

Le pop-over fournit une interface utilisateur épurée pour manipuler dynamiquement la typographie avec une série de types de saisie 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 acceptée. Dans notre exemple, nous utilisons le CSS gap: 12px;. Notez le schéma d'éclosion de chaque espace.

Flexbox

Problème Chromium: 1139949

Nouvel onglet "Cas de non-respect de CSP"

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

Onglet "Cas de non-respect de 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 les directives AA/AAA pour le rapport de contraste 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. Par rapport 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, objectif du texte).

APCA dans le sélecteur de couleur

L'exemple montre que le seuil APCA est de 38%. Le rapport de contraste doit être supérieur ou égal à la valeur indiquée. Cette valeur est calculée en fonction de l'épaisseur et de la taille de la police (voir 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 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   More > 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.

Nouveautés des outils de développement

Liste complète des sujets abordés dans la série Nouveautés des outils de développement.

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59