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

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 évidence tous les nœuds concernés par cette déclaration.

Pointez sur une propriété de marge pour mettre en évidence tous les nœuds concernés par cette déclaration

Figure 1 : Pointez sur une propriété margin pour mettre en évidence les marges de tous les nœuds concernés par celle-ci. déclaration

Lighthouse v4 dans le panneau "Audits"

Le nouvel audit Les éléments tactiles ne sont pas dimensionnés correctement. Il 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 notation par badge.

Nouveau système d'attribution de badges pour la catégorie PWA

Figure 3. Nouveau système d'attribution de badges pour la catégorie PWA

Lecteur de messages binaires WebSocket

Pour afficher le contenu d'un message WebSocket binaire:

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

    Panneau "Network" (Réseau)

    Figure 4. Panneau "Network" (Réseau)

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

    Lorsque vous cliquez sur WS, seules les connexions WebSockety s'affichent.

    Figure 5. Lorsque vous cliquez sur WS, 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 du message binaire pour l'inspecter.

    Inspecter un message binaire

    Figure 8. Inspecter un message binaire

Utilisez le menu déroulant en bas de la visionneuse pour convertir le message au format Base64 ou UTF-8. Cliquez sur Copier dans le presse-papiers Copier dans le presse-papiers pour copier dans votre presse-papiers.

Afficher un message binaire en base64

Figure 9. Afficher un message binaire en base64

Capture d'écran d'une zone dans le menu de commandes

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

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

    Menu de commandes

    Figure 10 : Menu de commandes

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

  3. Faites glisser votre souris sur la section de la fenêtre d'affichage dont vous souhaitez effectuer la capture d'écran.

    Sélection de la partie de la fenêtre d'affichage pour laquelle effectuer une capture d'écran

    Figure 11 : Sélection de la partie de la fenêtre d'affichage pour laquelle effectuer une capture d'écran

Filtres de service worker dans le panneau "Network" (Réseau)

Saisissez is:service-worker-initiated ou is:service-worker-intercepted dans le filtre du panneau "Réseau" zone de texte permettant d'afficher les requêtes généré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.

Mises à jour du panneau "Performances"

Les enregistrements des performances balisent désormais les longues tâches et la fonctionnalité First Paint.

Consultez Moins de travail sur le thread principal pour obtenir un exemple d'utilisation du panneau "Performance" pour analyser de chargement des pages.

Tâches longues dans les enregistrements de performances

Les enregistrements de performances affichent désormais de longues tasks.

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

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

Première peinture dans la section "Durée"

La section Durée d'un enregistrement de performance affiche désormais "Première peinture".

Première peinture dans la section "Durée"

Figure 15. Première peinture dans la section "Durée"

Nouveau tutoriel sur le DOM

Consultez Premiers pas avec l'affichage et la modification du DOM pour une visite pratique de l'utilisation du DOM caractéristiques.

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   Plus > 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