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

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 le mettre en surbrillance dans la fenêtre d'affichage.

Pointez sur le résultat d'une expression en direct pour mettre en surbrillance le nœud 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 Store as global variable (Stocker en tant que variable globale).

Stockez-les 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, puis sélectionner Stocker en tant que variable globale.

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

Exportation 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 glisser-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 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".

Colonne de l'initiateur.

Figure 9. Colonne de l'initiateur

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

Afficher les innovateurs 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. 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 de la table "Requêtes", puis sélectionnez Priorité pour afficher la colonne Priorité.

Découvrez 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 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 bouton Main Menu (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 fenêtre vidéo flottante au-dessus du bureau.

Cochez les cases enterpictureinpicture, leavepictureinpicture et resize dans le volet "Points d'arrêt de l'écouteur d'événements" pour marquer une pause 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.

É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 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 appuyé sur R, E ou D, mais que vous ne savez pas à quels événements ajouter des écouteurs. Utilisez monitorEvents() pour enregistrer tous les événements de l'élément dans la console.

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
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 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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.