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

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

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

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

Utiliser des opérateurs d'attente de premier niveau dans la console

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

Nouveaux workflows de captures 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 la fenêtre d'affichage:

  1. Cliquez sur Inspecter Inspecter, ou appuyez sur Cmd+Maj+C (Mac) ou Ctrl+Maj+C (Windows, Linux) pour activer le mode Inspecter.
  2. Maintenez la touche Cmd (Mac) ou Ctrl (Windows, Linux) enfoncée, puis sélectionnez la partie de la fenêtre d'affichage pour laquelle vous souhaitez effectuer une capture d'écran.
  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.

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

Figure 2 : 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:

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

    Exemple de nœud

    Image 3. Dans cet exemple, l'objectif est de faire 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 Commandes.

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

    Résultat de la commande "Capture node screenshot" (Capture d'écran du nœud)

    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, pointez dessus 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 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 2 minutes.

Nouvelle API pour interroger des objets de segment de mémoire

Appelez queryObjects(Constructor) à partir de 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 un nom de 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 la section Sélectionner un contexte d'exécution.

Nouveaux filtres de la console

La console accepte désormais les filtres d'URL et les filtres à exclure.

Filtres à exclure

Saisissez -<text> dans la zone de filtre pour filtrer tout message de la console incluant <text>.

Exemple de trois messages qui seront filtrés

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 Filtrer

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

  • 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 des expressions régulières telles que -/[4-5]*ms/.

Filtres d'URL

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

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

Exemple de filtrage d&#39;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" (Réseau)

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

Importer un fichier HAR

Figure 8 : Importer un fichier HAR

Ressources de cache prévisualisées dans le panneau "Application"

Cliquez sur une ligne d'un tableau Stockage du cache pour afficher un aperçu de la ressource concernée sous le tableau.

Prévisualiser une ressource de cache

Figure 9. Prévisualiser une ressource de cache

Débogage plus réactif du cache

À partir de la version 61 de Chrome, le débogage des caches créés avec l'API Cache est... rude. Par exemple, lorsqu'une page crée un cache, vous devez actualiser manuellement la page ou les outils de développement afin de voir le nouveau cache.

Dans Chrome 62, l'onglet Stockage du cache se met à jour en temps réel chaque fois que vous créez, mettez à jour ou supprimez un cache ou une ressource. Regardez l'exemple dans la vidéo ci-dessous.

Consultez la démonstration sur le stockage du cache pour l'essayer par vous-même.

Couverture de code au niveau du bloc

Dans Chrome 61 et les versions antérieures, l'onglet Couverture indique que tout le code d'une fonction est utilisé, tant que celle-ci est appelée.

Exemple de l&#39;onglet &quot;Couverture&quot; 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 indique désormais le code appelé au sein d'une fonction.

Exemple de l&#39;onglet &quot;Couverture&quot; dans Chrome 62

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

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

Nouveautés des outils de développement

Liste des points abordés dans la série Nouveautés des outils de développement.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59