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

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

Kayce Basques

Nouvelles fonctionnalités et modifications à venir dans les outils de développement dans Chrome 62:

Compatibilité avec les opérateurs await de premier niveau dans la console.
Captures d'écran d'une partie de la fenêtre d'affichage et captures d'écran de nœuds HTML spécifiques
Mise en surbrillance de la grille CSS
Une nouvelle API Console pour interroger des objets :
Les filtres négatifs et les filtres d'URL dans la console
Importations HAR dans le panneau Réseau
Ressources de cache prévisualisables :
Débogage du cache plus prévisible.
Couverture du code au niveau du bloc.

Remarque:Pour connaître la version de Chrome que vous utilisez, accédez à chrome://version. Chrome une nouvelle version majeure est mise à jour automatiquement toutes les six semaines environ.

Opérateurs d'attente de premier niveau dans la console

La console accepte désormais les opérateurs await de premier niveau.

Utiliser les opérateurs "await de premier niveau" dans la console

Figure 1 : Utiliser les opérateurs await de premier niveau dans la console

Nouveaux workflows de captures d'écran

Vous pouvez maintenant faire une capture d'écran d'une partie de la fenêtre d'affichage ou d'un nœud HTML spécifique.

Captures d'écran d'une partie de la fenêtre d'affichage

Pour effectuer une capture d'écran d'une partie de la fenêtre d'affichage:

Cliquez sur Inspecter ou appuyez sur Cmd+Maj+C (Mac) ou Appuyez sur Ctrl+Maj+C (Windows, Linux) pour passer en mode "Inspecter l'élément".
Maintenez la touche Commande (Mac) ou Ctrl (Windows, Linux) enfoncée et sélectionnez la partie de la fenêtre d'affichage pour laquelle vous voulez faire une capture d'écran.
Relâchez la souris. Les outils de développement téléchargent une capture d'écran de la partie que vous avez sélectionnée.

Faire une capture d'écran d'une partie de la fenêtre d'affichage

Figure 2 : Faire une capture d'écran d'une partie de la fenêtre d'affichage

Captures d'écran de nœuds HTML spécifiques

Pour effectuer une capture d'écran d'un nœud HTML spécifique:

Sélectionnez un élément dans le panneau Éléments.

Figure 3. Dans cet exemple, l'objectif est de faire une capture d'écran de l'en-tête bleu qui contient le texte Tools. Notez que ce nœud est déjà sélectionné dans l'arborescence DOM du Panneau Éléments
Ouvrez le menu Command (Commande).
Commencez à saisir node, puis sélectionnez Capture node screenshot. Les outils de développement téléchargent une capture d'écran nœud sélectionné.

Figure 4. Le résultat de la commande Capture node screenshot

Mise en surbrillance de la grille CSS

Pour afficher la grille CSS qui affecte un élément, passez la souris sur un élément dans l'arborescence DOM de Éléments. Une bordure en pointillés apparaît autour de chacun des éléments de la grille. Cela ne fonctionne que lorsque display:grid est appliqué à l'élément sélectionné ou à son parent.

Mettre en surbrillance une grille CSS

Figure 5. Mettre en surbrillance une grille CSS

Regardez la vidéo ci-dessous pour apprendre les bases de la grille CSS en moins de deux minutes.

Nouvelle API permettant d'interroger les objets de segments de mémoire

Appelez queryObjects(Constructor) à partir de la console pour renvoyer un tableau des objets qui ont été créé avec le constructeur spécifié. Exemple :

queryObjects(Promise) Renvoie toutes les promesses.
queryObjects(HTMLElement) Renvoie tous les éléments HTML.
queryObjects(foo), où foo est un nom de fonction. Renvoyer tous les objets instanciés via new foo().

Le champ d'application de queryObjects() correspond au contexte d'exécution actuellement sélectionné dans la console. Voir Sélectionner le contexte d'exécution.

Nouveaux filtres de la console

La console est désormais compatible avec les filtres d'URL et les filtres à exclure.

Filtres négatifs

Saisissez -<text> dans la zone de filtre pour filtrer tous les messages de la console incluant <text>.

Exemple de trois messages qui seront filtrés

Figure 6. La première instruction consigne one, two, three et four dans la console. two est masqué, car -two est saisi dans la zone Filtre

Les outils de développement filtrent un message si <text> est détecté:

Dans le texte du message
dans le nom de fichier d'où provient le message ;
Dans le texte de la trace de la pile

Le filtre négatif fonctionne également avec les expressions régulières telles que -/[4-5]*ms/.

Filtres d'URL

Saisissez url:<text> dans la zone de texte Filtre pour n'afficher que les messages provenant d'un script dont L'URL inclut <text>.

Le filtre utilise la correspondance partielle. Si <text> apparaît n'importe où dans l'URL, les outils de développement affichent .

Exemple de filtrage d'URL

Figure 7 : utiliser le filtrage d'URL pour n'afficher que les messages provenant de scripts dont l'URL ; inclut hymn. En pointant sur le nom du script, vous pouvez voir que le nom d'hôte inclut ce texte

Importations HAR dans le panneau "Network"

Glissez-déposez un fichier HAR dans le panneau Réseau pour l'importer.

Importer un fichier HAR

Figure 8. Importer un fichier HAR

Ressources de cache prévisualisables dans le panneau "Application"

Cliquez sur une ligne de la table Stockage en cache pour afficher un aperçu de cette ressource sous la table.

Prévisualiser une ressource de cache

Figure 9. Prévisualiser une ressource de cache

Débogage plus réactif du cache

Dans Chrome 61 et les versions antérieures, le débogage des caches créés avec l'API Cache est difficile. Pour Par exemple, lorsqu'une page crée un cache, vous devez actualiser manuellement la page ou les outils de développement pour afficher le nouveau cache.

Dans Chrome 62, l'onglet Stockage du cache est mis à jour en temps réel dès que vous créez, mettez à jour ou supprimer un cache ou une ressource. Regardez la vidéo ci-dessous pour voir un exemple.

Essayez par vous-même la démonstration du stockage du cache.

Couverture de code au niveau du bloc

Dans Chrome 61 et les versions antérieures, l'onglet Couverture marque tout le code d'une fonction comme utilisé. tant que la fonction est appelée.

Exemple de l'onglet "Couverture" dans Chrome 61

Figure 10 : Exemple de l'onglet Couverture dans Chrome 61. La ligne 4 est marquée comme utilisée, même si elle ne s'exécute jamais

À partir de Chrome 62, l'onglet Couverture vous indique maintenant quel code est appelé dans une fonction.

Exemple de l'onglet "Couverture" dans Chrome 62

Figure 11 : Exemple de l'onglet Couverture dans Chrome 62. La ligne 4 est marquée comme non utilisée.

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.