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

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

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.

Pointez sur un résultat d'expression en direct pour mettre en surbrillance le 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).

Stockez-le 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'Arbre DOM, puis sélectionner Store as global variable (Enregistrer en tant que variable globale).

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

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.

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, DevTools inclut 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. Cela correspond à la colonne Initiateur du tableau "Demandes".

Colonne de l'initiateur.

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.

Afficher les initiateurs et les dépendances

Figure 10 : Afficher les initiateurs 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.

Colonne "Priorité".

Figure 11 : Colonne "Priorité"

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

Afficher la colonne "Priorité"

Figure 12. Afficher la colonne Priorité

Accéder au menu Command depuis le menu principal

Utilisez le menu de commandes pour accéder rapidement aux panneaux, aux onglets et aux fonctionnalités de DevTools.

Menu Command.

Figure 13. Menu de commande

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

Ouverture du menu Command (Commande) à partir du menu principal.

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 s'arrête 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"

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

    Utilisation de "Stocker en tant que variable globale" pour obtenir une référence au nœud.

    Figure 17 : Utiliser 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().

    Transmettre le nœud à 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.

    É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 d'enregistrer 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 canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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.

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.