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

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

Point d'arrêt sur les non-respects du Trusted Type

Vous pouvez désormais définir des points d'arrêt et détecter les exceptions liées aux non-respects des Trusted Types dans le panneau Sources.

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

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

Problème Chromium : 1142804

Associer un problème du 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 fiable. Pointez dessus pour prévisualiser l'exception. Cliquez dessus pour développer l'onglet Problèmes. Vous y trouverez plus d'informations sur les exceptions et des conseils pour les résoudre.

Problème Chromium : 1150883

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

Vous pouvez désormais capturer des captures d'écran de nœuds pour un nœud complet, y compris le contenu sous la ligne de flottaison. Auparavant, la capture d'écran était tronquée pour le contenu non 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 la capture d'écran du nœud.

Problème Chromium : 1003629

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

Inspectez les requêtes réseau Trust Token avec le nouvel onglet Trust Tokens.

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 jetons de confiance.

D'autres fonctionnalités de débogage seront disponibles dans les prochaines versions.

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.

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 PWA a été modifiée de manière assez significative.

• Le groupe Installable est désormais entièrement basé sur les vérifications des fonctionnalités qui permettent de définir les critères d'installabilité de Chrome. Il s'agit des mêmes signaux que ceux affichés dans le volet "Manifeste".

  • L'audit "Enregistre un service worker…" est déplacé vers le groupe PWA optimisée, et l'audit "Utilise HTTPS" est désormais inclus dans l'audit clé "Exigences d'installabilité".
  • Le groupe Rapide et fiable est supprimé. L'audit "Conditions d'installabilité" remanié incluant la vérification de la compatibilité hors connexion, l'audit "La page actuelle et start_url répondent avec 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

Modifications apportées au panneau "Elements"

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 à un élément lorsque le hachage dans l'URL et l'ID d'un élément sont identiques. Essayez-le vous-même en consultant cette démo. Cette nouvelle fonctionnalité des outils de développement vous permet de tester ces styles sans avoir à modifier manuellement l'URL à chaque fois.

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 É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+⬇️

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 couleurs pour les propriétés CSS personnalisées.

Vous pouvez également maintenir la touche Shift enfoncée et cliquer sur le sélecteur de couleur pour parcourir les représentations RGBA, HSLA et hexadécimales de la valeur de couleur.

Problème Chromium : 1147016

Nouveaux raccourcis pour copier les propriétés CSS

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

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

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 de la règle actuelle, y compris les propriétés non valides et celles 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 : copiez la valeur de la ligne actuelle.

Problème Chromium : 1152391

Mises à jour des cookies

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

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

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 et vous verrez que les autres cookies restent dans la liste. Auparavant, vous ne pouviez que supprimer tous les cookies.

Problème Chromium : 978059

Nouvelle option permettant d'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.

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 Indicateurs client User-Agent pour modifier les indicateurs client.

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

Persister le 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 rechargée.

Problème Chromium : 1122580

Afficher les connexions WebTransport dans le panneau "Réseau"

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

WebTransport est une nouvelle API qui propose une messagerie client-serveur bidirectionnelle à faible latence. Pour en savoir plus sur ses cas d'utilisation et découvrir comment donner votre avis sur l'avenir de l'implémentation, consultez web.dev/webtransport/.

Problème Chromium : 1152290

"En ligne" renommé "Aucune limitation"

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

Problème Chromium : 1028078

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

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

Vous pouvez désormais copier les valeurs d'objet à l'aide des nouveaux raccourcis dans la console et le panneau "Sources". C'est particulièrement utile lorsque vous avez un grand objet (par exemple, un long tableau) à copier.

Problèmes Chromium : 1149859, 1148353

Nouveaux raccourcis pour copier le nom de fichier dans le panneau "Sources" et le volet "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.

Problème Chromium : 1155120

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

Nouvelles informations sur les Service Workers dans la vue "Détails du frame"

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

Dans le panneau Application, développez un frame avec des service workers, puis sélectionnez un service worker dans l'arborescence Service Workers pour afficher les détails.

Problème Chromium : 1122507

Mesurer les informations sur la 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'ensemble 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.

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 depuis la console ou 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 pourrez ensuite envoyer vos commentaires dans le pop-up.

Images perdues dans le panneau "Performances"

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

Problème Chromium : 1075865

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

Vous pouvez désormais émuler les 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 d'étendue pour basculer entre les postures à un écran (plié) et à deux écrans (déplié).

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 indique 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'option.

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 de 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 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 de 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'un test en phase préliminaire. Nous prévoyons d'améliorer et d'étendre la fonctionnalité de l'Enregistreur au fil du temps.

Problème Chromium : 1144127

Éditeur de police dans le volet "Styles"

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

Le pop-over fournit une interface utilisateur claire pour manipuler dynamiquement la typographie à l'aide d'une série de types d'entrée intuitifs.

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 de flexbox depuis la dernière version.

Les outils de développement affichent désormais une ligne de repère 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;. Notez le motif de hachures pour chaque écart.

Problème Chromium : 1139949

Nouvel onglet "Cas de non-respect de la CSP"

Affichez en un coup d'œil toutes les violations de la Content Security Policy (CSP) dans le nouvel onglet Violations de la CSP. Ce nouvel onglet est une fonctionnalité expérimentale qui devrait faciliter l'utilisation des pages Web comportant un grand nombre de violations de la CSP et des types fiables.

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 consignes AA/AAA dans le sélecteur de couleur.

L'APCA est une nouvelle façon de calculer le 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 sa couleur (différence de luminosité perçue entre le texte et l'arrière-plan) et de son contexte (lumière ambiante, environnement, objectif du texte).

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 la taille et de l'épaisseur de la police, en référence à cette table de consultation APCA.

Problème Chromium : 1121900

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.