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 règles de Trusted Type

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

L'API Trusted Types vous aide à prévenir les failles des scripts intersites basés sur le DOM. En savoir plus pour rédiger, examiner et gérer des applications débarrassées des failles DOM XSS grâce aux Trusted Types cliquez ici.

Dans le panneau Sources, ouvrez le volet latéral du débogueur. Développez la section Violation de CSP. dans la section "Breakpoints" (Points d'arrêt), puis cochez la case Trusted Type violations (Violations des types de confiance) pour interrompre des exceptions. Essayez par vous-même à l'aide de cette page de démonstration.

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 sur pour prévisualiser l'exception. Cliquez dessus pour développer l'onglet Issues (Problèmes). Vous y trouverez plus de détails sur les exceptions et des conseils sur la façon de les corriger.

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 a été coupée en raison du contenu non visible dans la fenêtre d'affichage. Les captures d'écran en pleine page sont plus précis maintenant.

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

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 conçue pour aider à lutter contre la fraude et à distinguer les bots des humains, sans passer par le suivi. 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 utilise maintenant Lighthouse 7. Consultez les notes de version pour obtenir la liste des modifications.

Nouveaux audits dans Lighthouse 7:

• Précharger l'image LCP (Largest Contentful Paint). Vérifie si l'image utilisée par l'élément LCP est préchargées afin d’améliorer votre temps LCP.
• Problèmes consignés dans le panneau Issues Indique une liste de problèmes non résolus dans Issues panneau.
• Progressive Web Apps (PWA) : La catégorie PWA a assez changé.

• Le groupe Installable est désormais entièrement alimenté par les vérifications de capacité qui permettent au critères installables. Il s'agit des mêmes signaux que dans le volet "Manifest".

  • L'action "Enregistre un service worker" audit est déplacé dans le groupe Optimisé pour les PWA, et l'option HTTPS" est désormais incluse dans les principales "exigences d'installation". audit.
  • Le groupe Rapide et fiable est supprimé. Avec la refonte des "exigences d'installation", audit inclut la vérification de la capacité hors connexion, et les champs "current page and start_url répondent avec 200 lorsque hors connexion" l'audit a été supprimé. Le message "Le chargement de la page est suffisamment rapide sur le réseau mobile" l'audit a é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 maintenant 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. Activer :target pour forcer et inspecter les styles.

Utiliser la pseudo-classe :target pour appliquer un style à l'élément lorsque le hachage dans 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 sans avoir à modifier manuellement l'URL en permanence.

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 être créée 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 couleur pour les propriétés CSS personnalisées.

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

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 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: copie toutes les déclarations associées à la règle actuelle, y compris les déclarations non valides et avec des propriétés 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é.

Problème Chromium: 997625

Effacer uniquement les cookies visibles

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

Dans le panneau Application > Cookies, saisissez du texte dans la zone de texte pour filtrer les cookies. Dans 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 sont conservés dans le liste. Auparavant, vous aviez uniquement la possibilité de supprimer tous les cookies.

Problème Chromium: 978059

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

Désormais, lorsque vous effacez les données du site dans le volet Stockage, les outils de développement n'effacent 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 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 les optimisations client pour les modifier.

Les hints client user-agent sont une alternative à la chaîne user-agent. Ils permettent aux développeurs d'accéder des informations sur le navigateur d'un utilisateur d'une manière ergonomique et respectueuse de la confidentialité. En savoir plus sur Hints client user-agent dans web.dev/user-agent-client-hints/.

Problème Chromium: 1073909

Mises à jour du panneau "Network"

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

Les outils de développement conservent le message "Enregistrer le journal réseau" . Auparavant, les outils de développement réinitialisaient le choix de l'utilisateur chaque fois qu'une page est actualisée.

Problème Chromium: 1122580

Afficher les connexions WebTransport dans le panneau "Network"

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

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

Problème Chromium: 1152290

"En ligne" renommée "No throttling"

L'option d'émulation de réseau "Online" (En ligne) est désormais renommée "No Throttling".

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". C'est particulièrement utile lorsque vous avez un objet volumineux (un long tableau, par exemple) à copier.

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.

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 frame contenant des service workers, puis sélectionnez-en un. 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 performance.measureMemory() de l'API s'affiche désormais sous Disponibilité de l'API. .

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

Problème Chromium: 1139899

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

Si vous souhaitez améliorer un message de problème, accédez à l'onglet Problèmes de la console ou Plus de paramètres > Plus d'outils > Problèmes > pour ouvrir l'onglet Issues (Problèmes). Développer un problème et cliquez sur Le message vous est-il utile ?, vous pouvez nous faire part de vos commentaires dans le pop-up.

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 et les suppressions de frames 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 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 pour basculer entre un écran unique ou plié, et double écran ou déplié. différentes.

Vous pouvez également activer les fonctionnalités expérimentales de la plate-forme Web pour accéder aux nouveaux médias CSS. screen-spanning 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 évidence lorsque le drapeau est est activé. Accédez à chrome://flags et activez/désactivez l'indicateur.

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 vos interactions avec le navigateur. ce qui facilite l'automatisation des tests des navigateurs. 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 sur 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 formulaire à l'écran. Notez que les commandes Puppeteer sont ajoutées au fichier en conséquence. Cliquez sur 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 de développer l'Enregistreur au fil du temps.

Problème Chromium: 1144127

Éditeur de polices dans le volet "Styles"

Le nouvel éditeur de polices est un éditeur pop-over situé dans le volet Styles. Il contient les propriétés liées aux polices afin de vous aider vous trouvez la typographie parfaite pour votre page Web.

Le pop-over fournit une UI propre qui permet de manipuler dynamiquement la typographie à l'aide d'une série types d'entrée.

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 La propriété CSS gap est également acceptée. Dans notre exemple, nous avons le CSS gap: 12px;. Notez le modèle de hachures pour chaque lac.

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 une expérimentation qui devrait faciliter l'utilisation de pages Web comportant de nombreuses des violations de CSP et de Trusted Type.

Problème Chromium: 1137837

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

L'algorithme avancé de contraste perceptuel (APCA) remplace l'algorithme AA/AAA rapport de contraste des consignes 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 à directives AA/AAA, l'APCA dépend davantage du contexte. Le contraste est calculé en fonction de l'état propriétés spatiales (épaisseur et taille de la police), couleur (différence de légèreté perçue entre le texte et arrière-plan) et le contexte (lumière ambiante, environnement, objectif du texte).

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 vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement