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

Kayce Basques

Voici quelques-unes des nouvelles fonctionnalités et des modifications majeures à venir dans les outils de développement dans Chrome 67:

Version vidéo des notes de version:

Ouvrez le panneau Network (Réseau), puis appuyez sur Commande+F (Mac) ou Ctrl+F (Windows, Linux, ChromeOS) pour ouvrir le nouveau volet Network Search (Recherche sur le réseau). Les outils de développement recherchent les en-têtes et les corps de toutes les requêtes réseau pour la requête que vous fournissez.

Recherche du texte "cache-control" dans le nouveau volet "Recherche de réseau".

Figure 1 : Recherche du texte cache-control à l'aide du nouveau volet "Recherche de réseau"

Cliquez sur Match Case (Respecter la casse) Respecter la casse pour rendre votre requête sensible à la casse. Cliquez sur Use Regular Expression (Utiliser une expression régulière) Utiliser une expression régulière pour afficher les résultats correspondant au modèle que vous fournissez. Vous n'avez pas besoin d'encapsuler votre expression régulière entre des barres obliques.

Requête d'expression régulière dans le volet de recherche de réseau.

Figure 2 : Requête d'expression régulière dans le volet de recherche de réseau.

L'interface utilisateur du volet Recherche globale correspond désormais à celle du nouveau volet Recherche sur le réseau. Désormais, il affiche également les résultats pour en faciliter la numérisation.

L'ancienne et la nouvelle interface utilisateur.

Image 3. L'ancienne interface utilisateur à gauche et la nouvelle à droite

Appuyez sur Commande+Option+F (Mac) ou Ctrl+Maj+F (Windows, Linux, ChromeOS) pour ouvrir la recherche globale. Vous pouvez également l'ouvrir via le menu de commandes.

Aperçus des valeurs de variable CSS dans le volet Styles

Lorsque la valeur d'une propriété de couleur CSS, telle que background-color ou color, est définie sur une variable CSS, les outils de développement affichent désormais un aperçu de cette couleur.

Exemple de valeurs de couleur des variables CSS.

Figure 4. Dans l'ancienne interface utilisateur de gauche, il n'y a pas d'aperçu des couleurs à côté de color: var(--main-color), tandis que dans la nouvelle interface utilisateur à droite,

Copier en tant que récupération

Effectuez un clic droit sur une requête réseau, puis sélectionnez Copy > Copy As Fetch (Copier > Copier en tant que récupération) pour copier le code équivalent fetch() pour cette requête dans votre presse-papiers.

Copier le code équivalent à "fetch()" pour une requête.

Figure 5. Copier le code équivalent à fetch() pour une requête

Les outils de développement génèrent du code semblable à celui-ci:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Mises à jour du panneau "Audits"

Nouveaux audits

Le panneau Audits comporte deux nouveaux audits, y compris:

Nouvelles options de configuration

Vous pouvez maintenant configurer le panneau Audits pour:

  • Conserver les paramètres de la fenêtre d'affichage pour ordinateur et du user-agent. En d'autres termes, vous pouvez empêcher le panneau Audits de simuler un appareil mobile.
  • Désactiver la limitation de la bande passante réseau et du processeur
  • Préservez l'espace de stockage, tel que LocalStorage et IndexedDB, pour tous les audits.

Nouvelles options de configuration de l'audit.

Figure 6. Nouvelles options de configuration de l'audit

Afficher les traces

Après avoir audité une page, cliquez sur Afficher la trace pour afficher dans le panneau Performances les données de performances de chargement sur lesquelles votre audit est basé.

Bouton "Afficher la trace".

Figure 7 : Bouton Afficher la trace

Arrêter les boucles infinies

Si vous utilisez souvent des boucles for, do...while ou une récursion, vous avez probablement exécuté une boucle infinie par erreur lors du développement de votre site. Pour arrêter la boucle infinie, vous pouvez maintenant:

  1. Ouvrez le panneau Sources.
  2. Cliquez sur Mettre en veille Pause. Le bouton devient Reprendre l'exécution du script Reprendre.
  3. Maintenez la touche Reprendre l'exécution du script Reprendre, puis sélectionnez Arrêter l'appel JavaScript en cours Arrêter.

Dans la vidéo ci-dessus, l'horloge est mise à jour via un minuteur setInterval(). Cliquez sur Start Infinite Loop (Démarrer une boucle infinie) pour exécuter une boucle do...while qui ne s'arrête jamais. L'intervalle reprend, car il n'était pas en cours d'exécution lorsque l'option Stop Current JavaScript Call (Arrêter l'appel JavaScript actuel) Arrêter a été sélectionnée.

Temps utilisateur dans les onglets "Performances"

Lorsque vous consultez un enregistrement des performances, cliquez sur la section Temps utilisateur pour afficher les mesures de temps utilisateur dans les onglets Résumé, Ascendant, Arborescence d'appels et Journal des événements.

Afficher les mesures de temps utilisateur dans l'onglet ascendant

Figure 8 : Afficher les mesures de temps utilisateur dans l'onglet Ascendant La barre bleue à gauche de la section Temps utilisateur indique que cette option est sélectionnée.

En général, vous pouvez maintenant sélectionner n'importe quelle section (Thread principal, Temps utilisateur, GPU, ScriptStreamer, etc.) et afficher l'activité de cette section dans les onglets.

Sélectionner des instances de VM JavaScript dans le panneau "Mémoire"

Le panneau Memory (Mémoire) répertorie désormais clairement toutes les instances de VM JavaScript associées à une page, au lieu de les masquer dans le menu déroulant Target (Cible) comme précédemment.

Captures d'écran avant et après le panneau "Mémoire".

Figure 9. Dans l'ancienne interface utilisateur sur la gauche, les instances de VM JavaScript sont masquées derrière le menu déroulant Cible, tandis que dans la nouvelle interface utilisateur à droite, elles sont affichées dans le tableau Sélectionner une instance de VM JavaScript.

Deux valeurs sont affichées à côté de l'instance developers.google.com: 8.7 MB et 13.3 MB. La valeur de gauche représente la mémoire allouée par JavaScript. La bonne valeur représente toute la mémoire OS allouée à cette instance de VM. La valeur de droite inclut la valeur de gauche. Dans le gestionnaire de tâches de Chrome, la valeur de gauche correspond à JavaScript Memory et la valeur de droite à Memory Footprint.

Onglet "Network" (Réseau) renommé "Page"

Dans le panneau Sources, l'onglet Réseau s'appelle désormais l'onglet Page.

Deux fenêtres d'outils de développement côte à côte, illustrant le changement de nom

Figure 10 : Dans l'ancienne interface utilisateur à gauche, l'onglet affichant les ressources de la page s'appelle Réseau, tandis que dans la nouvelle interface utilisateur à droite, il s'appelle Page.

Mises à jour du thème sombre

Un certain nombre de modifications mineures apportées au jeu de couleurs du thème sombre sont incluses dans Chrome 67. Par exemple, les icônes de points d'arrêt et la ligne d'exécution actuelle sont désormais vertes.

Capture d'écran de l'icône du nouveau point d'arrêt et de la ligne actuelle du jeu de couleurs d'exécution.

Figure 11 : Capture d'écran de l'icône du nouveau point d'arrêt et de la ligne de couleurs d'exécution actuelle

Transparence des certificats dans le panneau de sécurité

Le panneau Sécurité contient désormais des informations sur la transparence des certificats.

Informations sur la transparence des certificats dans le panneau de sécurité.

Figure 12. Informations sur la transparence des certifications dans le panneau de sécurité

Isolation de sites dans le panneau "Performances"

Si l'isolation de sites est activée, le panneau Performances fournit désormais un graphique de type "flamme" pour chaque processus, ce qui vous permet de voir le travail total généré par chacun d'eux.

Graphiques de flammes par processus dans un enregistrement des performances

Figure 13 : Graphiques de flammes par processus dans un enregistrement des performances

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

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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é annulé.

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