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

Jecelyn Yeen

Compatibilité avec le débogage pour les cas de non-respect des Trusted Types

Point d'arrêt en cas de non-respect des Trusted Types

Vous pouvez désormais définir des points d'arrêt et intercepter des exceptions en cas de non-respect des types approuvés dans le panneau Sources.

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

Dans le panneau Sources, ouvrez le volet de la barre latérale du débogueur. Développez la section Points d'arrêt des cas de non-respect CSP et cochez la case Cas de non-respect des types approuvés pour mettre en pause les exceptions. Essayez-le vous-même sur cette page de démonstration.

Point d'arrêt en cas de non-respect des Trusted Types

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 approuvé. Pointez dessus pour afficher un aperçu de l'exception. Cliquez dessus pour développer l'onglet Problèmes. Il fournit plus d'informations sur les exceptions et des conseils pour les résoudre.

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

Problème Chromium: 1150883

Capturer une capture d'écran du nœud au-delà du viewport

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

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

Capturer une capture d'écran du nœud au-delà du viewport

Problème Chromium: 1003629

Nouvel onglet "Trust Tokens" pour les requêtes réseau

Inspectez les requêtes réseau des jetons de confiance avec le nouvel onglet Trust Tokens (Jetons de confiance).

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

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 exécute désormais Lighthouse 7. Pour obtenir la liste complète des modifications, consultez les notes de version.

Lighthouse 7 dans le panneau Lighthouse

Nouveaux audits dans Lighthouse 7:

  • Préchargez l'image Largest Contentful Paint (LCP). Vérifie si l'image utilisée par l'élément LCP est préchargée pour améliorer la durée de votre LCP.
  • Problèmes enregistré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 des applications Web progressives a changé de manière assez importante.

  • Le groupe Installable (Installable) est désormais entièrement alimenté par les vérifications de fonctionnalités qui activent les critères d'installabilité de Chrome. Il s'agit des mêmes signaux que ceux affichés dans le volet "Fichier manifeste".

    • L'audit "Enregistre un service worker…" est déplacé vers le groupe PWA optimisé, et l'audit "Utilise HTTPS" est désormais inclus dans l'audit clé "Exigences d'installabilité".
    • Le groupe Rapide et fiable est supprimé. Comme l'audit "Exigences d'installabilité" remanié inclut la vérification des fonctionnalités hors connexion, l'audit "La page actuelle et start_url renvoient un code 200 en mode hors connexion" a été supprimé. L'audit "Le chargement de la page est suffisamment rapide sur les réseaux mobiles" a également été supprimé.

Problème Chromium: 772558

Mises à jour du panneau "Elements"

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

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

Dans le panneau Éléments, sélectionnez un élément et activez ou désactivez 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 dans l'URL et l'ID d'un élément sont identiques. Regardez cette démonstration pour 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 un é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 Elements (Éléments), puis sélectionnez Duplicate element (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 appuyer de manière prolongée sur la touche Shift et cliquer sur le sélecteur de couleur pour faire défiler les représentations RGBA, 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 des propriétés CSS

Vous pouvez désormais copier des 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 des 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: copiez toutes les déclarations sous la règle actuelle, y compris les propriétés incorrectes et celles avec un 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: copiez la valeur de la ligne active.

Problème Chromium: 1152391

Mises à jour des cookies

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

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

Accédez au panneau Application, puis sélectionnez le volet Cookies. Sélectionnez un cookie dans la liste. Cochez la nouvelle case Afficher les valeurs décodées via l'URL 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 Supprimer tous les cookies du volet "Cookies" est désormais remplacé par le bouton Supprimer 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 Supprimer les cookies filtrés pour supprimer les cookies visibles. Effacez le texte du filtre. Les autres cookies restent dans la liste. Auparavant, vous ne pouviez supprimer que 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 Storage (Stockage), DevTools n'efface désormais que les cookies first party 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 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 Indicateurs client User-Agent pour modifier les indicateurs client.

Modifier les indicateurs client User-Agent

Les hints client user-agent sont 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é. En savoir plus sur les hints client User-Agent sur web.dev/user-agent-client-hints/

Problème Chromium: 1073909

Mises à jour du panneau "Network" (Réseau)

Persistance du paramètre "Enregistrer le journal réseau"

Les outils de développement conservent désormais 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 était actualisée.

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 qui offre une messagerie bidirectionnelle à faible latence entre client et serveur. Pour en savoir plus sur ses cas d'utilisation et sur la façon de donner votre avis sur l'avenir de l'implémentation, consultez web.dev/webtransport/.

Problème Chromium: 1152290

"En ligne" renommé "Pas de limitation de débit"

L'option d'émulation réseau "En ligne" a été renommée "Pas de limitation de débit".

Enregistrer le journal réseau

Problème Chromium: 1028078

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

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

Vous pouvez désormais copier les valeurs des objets à l'aide des nouveaux raccourcis du panneau "Console et sources". Cela est particulièrement pratique lorsque vous devez copier un objet volumineux (par exemple, un tableau long).

Copier un objet dans la console

Copier un objet dans le panneau "Sources"

Problèmes Chromium: 1149859, 1148353

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

Vous pouvez désormais copier le nom d'un fichier en effectuant un clic droit sur:

  • un fichier dans le panneau Sources ;
  • 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 "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 services workers dans la vue "Détails du frame"

DevTools affiche désormais des travailleurs de service dédiés sous le frame qui les crée.

Dans le panneau Application, développez un frame contenant des services workers, puis sélectionnez un service worker sous l'arborescence Service workers (Services workers) pour afficher les détails.

Informations sur les services workers dans la vue "Détails du frame"

Problème Chromium: 1122507

Mesurer les informations de mémoire dans la vue "Détails du 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 de l'intégralité de la page Web. Découvrez comment surveiller l'utilisation totale de la mémoire de votre page Web avec cette nouvelle API dans 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 d'erreur, accédez à l'onglet Problèmes dans la console ou dans Plus de paramètres > Plus d'outils > Problèmes pour ouvrir l'onglet Problèmes. Développez un message d'erreur, puis cliquez sur Ce message vous a-t-il été utile ?. Vous pouvez ensuite envoyer vos commentaires dans le pop-up.

Lien vers le formulaire d'envoi de commentaires

Images perdues dans le panneau "Performances"

Lorsque vous analysez les performances de chargement dans le panneau "Performances", la section Frames (Images) marque désormais les images abandonnées en rouge. Pointez dessus pour connaître la fréquence d'images.

Pertes de fréquence d'images

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 DevTools.

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 de plage pour basculer entre les positions en mode écran unique ou plié, et en mode 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 multimédia CSS et à l'API JavaScript getWindowSegments. L'icône expérimentale affiche l'état du flag Fonctionnalités expérimentales de la plate-forme Web. L'icône est mise en évidence lorsque l'indicateur est activé. Accédez à chrome://flags et activez l'indicateur.

Émuler le double écran

Problème Chromium: 1054281

Fonctionnalités expérimentales

Automatiser les tests du navigateur avec Puppeteer Recorder

DevTools peut 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 pour les développeurs. 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 Enregistrer en bas de l'écran 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 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 qu'il s'agit d'une fonctionnalité expérimentale en phase de développement. Nous prévoyons d'améliorer et d'étendre les fonctionnalités de l'Enregistreur au fil du temps.

Enregistreur Puppeteer

Problème Chromium: 1144127

Éditeur de polices dans le volet "Styles"

Le nouvel éditeur de polices est un éditeur à fenêtre pop-up dans le Volet "Styles" pour les propriétés liées aux polices. Il vous aide à trouver la typographie parfaite pour votre page Web.

Le popover fournit une UI propre pour manipuler dynamiquement la typographie à l'aide d'une série de types de saisie intuitifs.

Éditeur de polices dans le volet "Styles"

Problème Chromium: 1093229

Outils de débogage des champs flexibles CSS

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

DevTools dessine 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 avons CSS gap: 12px;. Notez le motif de hachurage pour chaque écart.

Flexbox

Problème Chromium: 1139949

Nouvel onglet "Cas de non-respect CSP"

Consultez toutes les violations de la Content Security Policy (CSP) en un coup d'œil dans le nouvel onglet Cas de non-respect CSP. Ce nouvel onglet est un test qui devrait faciliter la gestion des pages Web comportant un grand nombre d'infractions au CSP et au type approuvé.

Onglet "Cas de non-respect CSP"

Problème Chromium: 1137837

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

L'algorithme de contraste perceptif avancé (APCA) remplace le rapport de contraste des consignes 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 consignes AA/AAA, l'APCA est plus dépendante 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 de l'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, en vous référant à cette table de recherche de l'APCA.

Problème Chromium: 1121900

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.

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.