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

Voici les nouvelles fonctionnalités et les modifications apportées aux outils pour les développeurs dans Chrome 62 :

• Prise en charge des 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.
• Nouvelle API Console pour interroger les objets.
• Filtres négatifs et 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.

Opérateurs await de premier niveau dans la console

La console est désormais compatible avec les opérateurs await de premier niveau.

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

Nouveaux workflows de capture d'écran

Vous pouvez désormais effectuer 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 votre fenêtre d'affichage :

1. Cliquez sur Inspecter ou appuyez sur Cmd+Maj+C (Mac) ou Ctrl+Maj+C (Windows, Linux) pour passer en mode "Inspecter l'élément".
2. Maintenez la touche Command (Mac) ou Ctrl (Windows, Linux) enfoncée, puis sélectionnez la partie de la fenêtre d'affichage que vous souhaitez capturer.
3. 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.

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 prendre une capture d'écran d'un nœud HTML spécifique :

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

   

   Figure 3. Dans cet exemple, l'objectif est de prendre une capture d'écran de l'en-tête bleu contenant le texte Tools. Notez que ce nœud est déjà sélectionné dans l'arborescence DOM du panneau Éléments.

2. Ouvrez le menu Command (Commande).

3. Commencez à saisir node, puis sélectionnez Capture node screenshot. Les outils de développement téléchargent une capture d'écran du nœud sélectionné.

   

   Figure 4. 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, pointez sur un élément dans l'arborescence DOM du panneau Éléments. Une bordure en pointillés apparaît autour de chacun des éléments de la grille. Cela ne fonctionne que lorsque l'élément sélectionné ou son parent est associé à display:grid.

Figure 5. Mettre en surbrillance une grille CSS

Regardez la vidéo ci-dessous pour découvrir les principes de base de la grille CSS en moins de deux minutes.

Nouvelle API pour interroger les objets du tas

Appelez queryObjects(Constructor) depuis la console pour renvoyer un tableau d'objets créés 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 le nom d'une fonction. Renvoie 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. Consultez Sélectionner un contexte d'exécution.

Nouveaux filtres de la console

La console est désormais compatible avec les filtres négatifs et d'URL.

Filtres négatifs

Saisissez -<text> dans la zone Filtre pour filtrer tous les messages Console qui incluent <text>.

Figure 6. La première instruction enregistre 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 trouvé :

• Dans le texte du message.
• Dans le nom du fichier à l'origine du message.
• Dans le texte de la trace de 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 Filtrer pour n'afficher que les messages provenant d'un script dont l'URL inclut <text>.

Le filtre utilise la correspondance approximative. Si <text> apparaît n'importe où dans l'URL, les outils pour les développeurs affichent le message.

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 "Réseau"

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

Figure 8. Importer un fichier HAR

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

Cliquez sur une ligne d'un tableau Cache Storage pour afficher un aperçu de cette ressource sous le tableau.

Figure 9. Prévisualiser une ressource de cache

Débogage du cache plus réactif

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

Dans Chrome 62, l'onglet Cache Storage (Stockage du cache) s'actualise désormais en temps réel chaque fois que vous créez, mettez à jour ou supprimez un cache ou une ressource. Regardez la vidéo ci-dessous pour un exemple.

Consultez la démonstration de Cache Storage pour l'essayer vous-même.

Couverture du code au niveau du bloc

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

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 indique désormais le code appelé dans une fonction.

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

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés des outils pour les développeurs.