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

Kayce Basques
Kayce Basques

Bienvenue ! Voici les nouveautés.

Version vidéo de cette page

Mettre en surbrillance tous les nœuds affectés par la propriété CSS

Pointez sur une propriété CSS qui affecte le modèle de boîte d'un nœud, comme padding ou margin, pour mettre en surbrillance tous les nœuds concernés par cette déclaration.

Si vous pointez sur une propriété de marge, tous les nœuds concernés par cette déclaration sont mis en surbrillance.

Figure 1 : Si vous pointez sur une propriété margin, les marges de tous les nœuds concernés par cette déclaration sont mises en surbrillance.

Lighthouse v4 dans le panneau "Audits"

Le nouvel audit Les éléments tactiles ne sont pas dimensionnés correctement vérifie que les éléments interactifs tels que les boutons et les liens sont suffisamment grands et espacés sur les appareils mobiles.

La catégorie PWA d'un rapport utilise désormais un système de badges.

Nouveau système de notation des badges pour la catégorie PWA

Figure 3. Nouveau système de notation des badges pour la catégorie PWA

Visionneuse de messages binaires WebSocket

Pour afficher le contenu d'un message WebSocket binaire :

  1. Ouvrez le panneau Réseau. Consultez Inspecter l'activité réseau pour découvrir les principes de base de l'analyse de l'activité réseau.

    Panneau "Network"

    Figure 4. Panneau "Network"

  2. Cliquez sur WS pour filtrer toutes les ressources qui ne sont pas des connexions WebSocket.

    Après avoir cliqué sur "WS only", seules les connexions WebSockety s'affichent.

    Figure 5. Après avoir cliqué sur "WS only", seules les connexions WebSockety s'affichent.

  3. Cliquez sur le nom d'une connexion WebSocket pour l'inspecter.

    Inspecter une connexion WebSocket

    Figure 6. Inspecter une connexion WebSocket

  4. Cliquez sur l'onglet Messages.

    Onglet "Messages"

    Figure 7 : Onglet "Messages"

  5. Cliquez sur l'une des entrées Binary Message (Message binaire) pour l'inspecter.

    Inspecter un message binaire

    Figure 8. Inspecter un message binaire

Utilisez le menu déroulant en bas du lecteur pour convertir le message au format Base64 ou UTF-8. Cliquez sur Copier dans le presse-papiers Copier dans le presse-papiers pour copier le message binaire dans le presse-papiers.

Afficher un message binaire au format Base64

Figure 9. Afficher un message binaire au format Base64

Effectuer une capture d'écran de la zone sélectionnée dans le menu de commandes

Les captures d'écran de zone vous permettent de capturer une partie de la fenêtre d'affichage. Cette fonctionnalité existe depuis un certain temps, mais le workflow pour y accéder était assez caché. Les captures d'écran de zones sont désormais disponibles dans le menu de commandes.

  1. Activez les outils de développement, puis appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu de commandes.

    Menu de commandes

    Figure 10 : Menu de commandes

  2. Commencez à saisir area, sélectionnez Capturer des captures d'écran de zones, puis appuyez sur Entrée.

  3. Faites glisser la souris sur la partie de la fenêtre d'affichage que vous souhaitez capturer.

    Sélectionner la partie de la fenêtre d'affichage à capturer

    Figure 11 : Sélectionner la partie de la fenêtre d'affichage à capturer

Filtres de service worker dans le panneau "Réseau"

Saisissez is:service-worker-initiated ou is:service-worker-intercepted dans la zone de texte du filtre du panneau "Réseau" pour afficher les requêtes qui ont été provoquées (initiated) ou potentiellement modifiées (intercepted) par un service worker.

Filtrer par is:service-worker-initiated

Figure 12. Filtrage par is:service-worker-initiated

Filtrer par is:service-worker-intercepted

Figure 13. Filtrage par is:service-worker-intercepted

Pour en savoir plus sur le filtrage des journaux réseau, consultez Filtrer les ressources.

Modifications apportées au panneau "Performances"

Les enregistrements de performances marquent désormais les tâches longues et le premier affichage.

Consultez Réduire le travail du thread principal pour obtenir un exemple d'utilisation du panneau "Performances" afin d'analyser les performances de chargement des pages.

Tâches longues dans les enregistrements de performances

Les enregistrements de performances affichent désormais les tâches longues.

Pointeur sur une longue tâche dans un enregistrement des performances

Figure 14. Pointeur sur une longue tâche dans un enregistrement des performances

First Paint dans la section "Timing"

La section "Timing" d'un enregistrement des performances marque désormais le premier affichage.

First Paint dans la section "Timing"

Figure 15. First Paint dans la section "Timing"

Nouveau tutoriel sur le DOM

Consultez Premiers pas avec l'affichage et la modification du DOM pour découvrir les fonctionnalités liées au DOM.

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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.