Cette page a été traduite par l'API Cloud Translation.

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

Kayce Basques

Les nouvelles fonctionnalités et modifications majeures apportées aux outils pour les développeurs Chrome dans Chrome 71 incluent:

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 "Commandes" depuis le menu principal
Points d'arrêt Picture-in-picture
(Astuce supplémentaire) Exécutez monitoringEvents() dans la console pour observer le déclenchement des événements d'un élément.

Poursuivez votre lecture 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 active correspond à un nœud DOM, pointez sur le résultat "Expression en direct" pour mettre ce nœud en surbrillance dans la fenêtre d'affichage.

Pointez sur un résultat d'expression en temps réel pour mettre en surbrillance le nœud dans la fenêtre d'affichage.

Figure 1 : Pointer sur un résultat d'expression en temps réel 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 dans la console une expression qui renvoie un nœud, effectuez un clic droit sur le résultat, puis sélectionnez Stocker en tant que variable globale.

Stockez en tant que variable globale dans la console.

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 et sélectionner Stocker en tant que variable globale.

Stockez en tant que variable globale dans l'arborescence DOM.

Image 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 vos collègues, vous pouvez exporter les requêtes réseau vers un fichier HAR.

Exporter des 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 faire glisser et de le déposer.

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 les outils de développement, les colonnes Initiateur et Priorité sont désormais renseignées.

Le champ _initiator fournit plus de contexte sur les raisons pour lesquelles la ressource a été demandée. Cette valeur correspond à la colonne Initiator de la table "Requêtes".

Colonne de l'initiateur.

Figure 9. Colonne de l'initiateur

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

Afficher les innovateurs et les dépendances

Figure 10 : Afficher les initiés et les dépendances

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

Colonne Priorité

Figure 11 : Colonne "Priorité"

Effectuez un clic droit sur l'en-tête du tableau "Requêtes" et sélectionnez Priorité pour afficher la colonne Priorité.

Comment afficher la colonne "Priorité"

Figure 12. Afficher la colonne Priorité

Remarque:Les champs _initiator et _priority commencent par des traits de soulignement, car la spécification HAR indique que les champs personnalisés doivent commencer par des traits de soulignement.

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

Figure 13 : Le menu Commandes

Vous pouvez maintenant ouvrir le menu Commandes à partir du menu principal. Cliquez sur le bouton Menu principal , puis sélectionnez Exécuter la commande.

Figure 14 : Ouverture du menu 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 fenêtre vidéo flottante sur le bureau.

Cochez les cases enterpictureinpicture, leavepictureinpicture et resize dans le volet Points d'arrêt de l'écouteur d'événements pour mettre en pause chaque fois que l'un de ces événements Picture-in-picture se déclenche. Les outils de développement sont mis en pause sur la première ligne du gestionnaire.

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

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 observer 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 appuyé sur R, E et 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.

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

Figure 17 : En utilisant l'option Stocker en tant que variable globale pour obtenir une référence au nœud
Transmettez le nœud en tant que premier argument à monitorEvents().

Figure 18 : Transmettre le nœud à monitorEvents()
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 l'enregistrement 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 aux outils de développement de consigner tous les événements liés à la souris, tels que mousedown et click. Les autres types compatibles 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

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