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 zone d'un nœud, comme padding ou margin, pour mettre en surbrillance tous les nœuds concernés par cette déclaration.

Pointez sur une propriété de marge pour mettre en surbrillance 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 cette déclaration.

Lighthouse v4 dans le panneau "Audits"

Les nouveaux audits des nouvelles zones cibles tactiles ne sont pas dimensionnés correctement vérifient que les éléments interactifs tels que les boutons et les liens sont bien 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 de notation par badge pour la catégorie PWA

Image 3. Nouveau système de notation par badge 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). Pour en savoir plus sur les principes de base de l'analyse de l'activité réseau, consultez la page Inspecter l'activité réseau.

    Le panneau "Network" (Réseau)

    Figure 4. Le panneau "Network" (Réseau)

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

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

    Figure 5. Après avoir cliqué 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 en Base64 ou UTF-8. Cliquez sur Copier dans le presse-papiers Copier dans le presse-papiers pour copier le message binaire dans votre presse-papiers.

Afficher un message binaire en base64

Figure 9. Afficher un message binaire en base64

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

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

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

    Le menu Commandes

    Figure 10 : Le menu Commandes

  2. Commencez à saisir area, sélectionnez Capture Area Capture (Capturer la zone), puis appuyez sur Entrée.

  3. Faites glisser la souris sur la section de la fenêtre d'affichage que vous souhaitez faire une capture d'écran.

    Sélectionner la partie de la fenêtre d'affichage à faire une capture d'écran

    Figure 11 : Sélectionner la partie de la fenêtre d'affichage à faire une capture d'écran

Filtres de service worker dans le panneau "Network"

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

Filtrage par is:service-worker-Initiate

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

Filtrage 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 la section Filtrer les ressources.

Informations sur le panneau "Performances"

Les enregistrements de performances balisent désormais les longues tâches et le composant First Paint.

Consultez la section Faciliter le travail du thread principal pour obtenir un exemple d'utilisation du panneau "Performances" permettant d'analyser les performances de chargement des pages.

Tâches longues dans les enregistrements de prestations

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

Pointer sur une tâche longue dans un enregistrement de performance

Figure 14 : Pointer sur une tâche longue dans un enregistrement de performance

First Paint dans la section Chronologies

La section Timing d'un enregistrement de performance inclut désormais la mention "First Paint".

First Paint dans la section Chronologies

Figure 15 : First Paint dans la section Chronologies

Nouveau tutoriel sur les DOM

Consultez la page Get Started With See And Change the DOM (Premiers pas avec l'affichage et la modification du DOM) pour une visite guidée des fonctionnalités liées au DOM.

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

  • Envoyez-nous une suggestion ou des commentaires via crbug.com.
  • Signalez un problème dans les outils de développement via Plus d'options   More > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
  • Envoyez un tweet à @ChromeDevTools.
  • Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.

Nouveautés des outils de développement

Liste des points abordés dans la série Nouveautés des outils de développement.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59