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

Kayce Basques

Voici quelques-unes des nouvelles fonctionnalités et des modifications majeures à venir dans les outils pour les développeurs Chrome dans Chrome 71:

• Pointez sur une expression active pour mettre en surbrillance un nœud DOM
• Stocker les 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 de commandes depuis le menu principal
• Points d'arrêt Picture-in-picture
• Astuce supplémentaire : Exécutez monitoringEvents() dans la console pour surveiller le déclenchement des événements d'un élément.

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

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

Lorsqu'une expression active renvoie un nœud DOM, passez la souris sur le résultat correspondant pour mettre ce nœud en surbrillance dans la fenêtre d'affichage.

Figure 1 : Pointer sur le résultat d'une expression active pour mettre en surbrillance le nœud dans la fenêtre d'affichage

Stocker les 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 renvoie un nœud, Effectuez un clic droit sur le résultat, puis sélectionnez 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'arborescence DOM, puis sélectionner Stocker 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 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 "Network", il vous suffit de le glisser-déposer.

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

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

Figure 9. Colonne de l'initiateur

Vous pouvez également maintenir la touche Maj enfoncée et passer la souris sur une demande pour afficher son émetteur et les dépendances.

Figure 10 : Afficher les innovateurs et les dépendances

Le champ _priority indique le niveau de priorité attribué par le navigateur à la ressource. Cela 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 Priorité. .

Figure 12. Afficher la colonne Priorité

Accéder au menu de commandes à partir du 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 commandes

Vous pouvez maintenant ouvrir le menu de commandes à partir du menu principal. Cliquez sur le menu principal. , puis sélectionnez Run command (Exécuter la commande).

Figure 14. Ouverture du menu de commandes à partir du 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 vidéo flottante sur le bureau.

Cochez les cases enterpictureinpicture, leavepictureinpicture et resize dans l'événement Volet "Points d'arrêt de l'écouteur" pour s'interrompre chaque fois que l'un de ces événements Picture-in-picture se déclenche. Les outils de développement s'interrompent 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"

(Astuce supplémentaire) Exécutez monitoringEvents() 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 l'avoir sélectionné et après avoir appuyé sur R, E, D. mais vous ne savez pas à quels événements ajouter des écouteurs. Utilisez monitorEvents() pour consigner toutes les les événements d'un élément à 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. Les outils de développement consignent 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 de consigner les é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 aux outils de développement 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 de la ligne de commande pour découvrir d'autres fonctions pratiques que vous pouvez appeler à partir de la console.

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