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

Kayce Basques

Voici les nouvelles fonctionnalités et les principaux changements apportés aux outils pour les développeurs Chrome dans Chrome 71:

• Pointer sur une expression en direct pour mettre en surbrillance un nœud DOM
• Stocker des nœuds DOM en tant que variables globales
• Informations sur l'initiateur et la priorité désormais dans les importations et exportations HAR
• Accéder au menu Command (Commande) à partir du menu principal
• Points d'arrêt Picture-in-picture
• (Conseil supplémentaire) Exécuter monitorEvents() dans la console pour surveiller le déclenchement des événements d'un élément

Lisez la suite ou regardez la version vidéo de cette page:

Pointez sur une expression en direct pour mettre en surbrillance un nœud DOM

Lorsqu'une expression dynamique se traduit par un nœud DOM, pointez sur le résultat de l'expression dynamique pour mettre en surbrillance ce nœud dans le viewport.

Figure 1 : Pointer sur un résultat d'expression en direct pour mettre en surbrillance le nœud dans le viewport

Stocker des nœuds DOM en tant que variables globales

Pour stocker un nœud DOM en tant que variable globale, exécutez une expression dans la console qui évalue à un nœud, effectuez un clic droit sur le résultat, puis sélectionnez Store as global variable (Stocker en tant que variable globale).

Figure 2 : Stocker en tant que variable globale dans la console

Vous pouvez également effectuer un clic droit sur le nœud dans l'Arbre DOM, puis sélectionner Store as global variable (Enregistrer en tant que variable globale).

Figure 3. Stocker en tant que variable globale dans l'arborescence DOM

Informations sur l'initiateur et la priorité désormais disponibles dans les importations et exportations HAR

Si vous souhaitez diagnostiquer les journaux réseau avec des collègues, vous pouvez exporter les requêtes réseau vers un fichier HAR.

Figure 8. Exporter des requêtes réseau vers un fichier HAR

Pour réimporter le fichier dans le panneau "Réseau", il vous suffit de le faire glisser.

Lorsque vous exportez un fichier HAR, les outils de développement incluent désormais des informations sur l'initiateur et la priorité dans le fichier HAR. Lorsque vous réimportez des fichiers HAR dans DevTools, les colonnes Initiator (Initiateur) et Priority (Priorité) sont désormais renseignées.

Le champ _initiator fournit plus de contexte sur la raison pour laquelle la ressource a été demandée. Ce code correspond à la colonne Initiator de la table "Requêtes".

Figure 9. Colonne "Initiateur"

Vous pouvez également maintenir la touche Maj enfoncée et pointer sur une requête pour afficher son initiateur et ses dépendances.

Figure 10 : Afficher les innovateurs et les dépendances

Le champ _priority indique le niveau de priorité que le navigateur a attribué à la ressource. Cette valeur correspond à la colonne Priorité du tableau "Requêtes", qui est masquée par défaut.

Figure 11 : Colonne "Priorité"

Effectuez un clic droit sur l'en-tête de la table "Requêtes", puis sélectionnez Priorité pour afficher la colonne Priorité.

Figure 12. Afficher la colonne Priorité

Accéder au menu Command depuis le menu principal

Utilisez le menu Command (Commandes) pour accéder rapidement aux panneaux, onglets et fonctionnalités des outils de développement.

Figure 13. Menu de commande

Vous pouvez désormais ouvrir le menu de commande à partir du menu principal. Cliquez sur le bouton Menu principal , puis sélectionnez Exécuter une commande.

Figure 14. Ouvrir le menu Command depuis le menu principal

Points d'arrêt Picture-in-picture

Picture-in-Picture est une nouvelle API expérimentale qui permet à une page de créer une fenêtre vidéo flottante sur l'écran d'ordinateur.

Cochez les cases enterpictureinpicture, leavepictureinpicture et resize dans le volet "Points d'arrêt de l'écouteur d'événements" pour suspendre l'exécution chaque fois qu'un de ces événements Picture-in-picture se déclenche. DevTools se met en pause sur la première ligne du gestionnaire.

Figure 16 : Événements Picture-in-picture dans le volet "Points d'arrêt de l'écouteur d'événements"

(Conseil supplémentaire) Exécutez monitorEvents() dans la console pour surveiller le déclenchement des événements d'un élément

Supposons que vous souhaitiez ajouter une bordure rouge autour d'un bouton après avoir mis le focus dessus et appuyé sur R, E ou D, mais que vous ne sachiez pas à quels événements ajouter des écouteurs. Utilisez monitorEvents() pour consigner tous les événements de l'élément dans la console.

1. Obtenez une référence au nœud.

   

   Figure 17 : En utilisant Store as global variable (Stocker en tant que variable globale) pour obtenir une référence au nœud

2. Transmettez le nœud en tant que premier argument à monitorEvents().

   

   Figure 18 : Transmettre le nœud à monitorEvents()

3. Interagissez avec le nœud. DevTools consigne tous les événements du nœud dans la console.

   

   Figure 19 Événements du nœud dans la console

Appelez unmonitorEvents() pour arrêter la journalisation des événements dans la console.

unmonitorEvents(temp1);

Transmettez un tableau en tant que deuxième argument à monitorEvents() si vous ne souhaitez surveiller que certains événements ou types d'événements:

monitorEvents(temp1, ['mouse', 'focus']);

Le type mouse indique à DevTools de consigner tous les événements liés à la souris, tels que mousedown et click. Les autres types acceptés sont key, touch et control.

Consultez la documentation de référence sur la ligne de commande pour découvrir d'autres fonctions pratiques que vous pouvez appeler depuis la console.

Télécharger les canaux de prévisualisation

Envisagez d'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 plate-forme 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, 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 à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.