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

Kayce Basques
Kayce Basques
X GitHub

Voici les nouvelles fonctionnalités et les principaux changements apportés aux outils de développement dans Chrome 67 :

Version vidéo des notes de version :

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

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

Figure 1 : Recherche du texte cache-control dans le nouveau volet "Recherche réseau"

Cliquez sur Respecter la casse Respecter la casse pour que votre requête soit sensible à la casse. Cliquez sur Utiliser une expression régulière Utiliser une expression régulière pour afficher tous les résultats correspondant au format que vous fournissez. Vous n'avez pas besoin d'encadrer votre expression régulière par des barres obliques.

Requête avec une expression régulière dans le volet "Recherche sur le réseau".

Figure 2 : Requête avec une expression régulière dans le volet "Recherche sur le réseau".

L'UI du volet Recherche globale correspond désormais à celle du nouveau volet Recherche de réseau. Il met désormais en forme les résultats pour faciliter la lecture.

Ancienne et nouvelle UI.

Figure 3. Ancienne interface utilisateur à gauche et nouvelle interface utilisateur à 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 Command.

Aperçus des valeurs des variables 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 de variables CSS.

Figure 4. Dans l'ancienne UI à gauche, aucune couleur n'est affichée à côté de color: var(--main-color), contrairement à la nouvelle UI à droite.

Copier en tant que fetch

Effectuez un clic droit sur une requête réseau, puis sélectionnez Copier > Copier en tant que Fetch 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 produisent un 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"
});

Modifications du panneau "Audits"

Nouveaux audits

Le panneau Audits comporte deux nouveaux audits :

Nouvelles options de configuration

Vous pouvez maintenant configurer le panneau Audits pour :

  • Conservez les paramètres de la fenêtre d'affichage et de l'agent utilisateur pour ordinateur. En d'autres termes, vous pouvez empêcher le panneau Audits de simuler un appareil mobile.
  • Désactivez la limitation de bande passante réseau et de processeur.
  • Conservez le stockage, tel que LocalStorage et IndexedDB, lors des 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 les données de performances de chargement sur lesquelles votre audit est basé dans le panneau Performances.

Bouton "Afficher le suivi"

Figure 7 : Bouton Afficher la trace

Arrêter les boucles infinies

Si vous travaillez souvent avec des boucles for, des boucles do...while ou la récursivité, 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 désormais :

  1. Ouvrez le panneau Sources.
  2. Cliquez sur Suspendre Pause. Le bouton devient Reprendre l'exécution du script Reprendre.
  3. Appuyez de manière prolongée sur Reprendre l'exécution du script Reprendre, puis sélectionnez Mettre fin à l'appel JavaScript en cours Arrêter.

Dans la vidéo ci-dessus, l'horloge est mise à jour à l'aide d'un minuteur setInterval(). Si vous cliquez sur Démarrer la boucle infinie, une boucle do...while s'exécute sans jamais s'arrêter. L'intervalle reprend, car il n'était pas en cours d'exécution lorsque Mettre fin à l'appel JavaScript en cours Arrêter a été sélectionné.

Temps utilisateur dans les onglets "Performances"

Lorsque vous consultez un enregistrement des performances, cliquez sur la section User Timing (Timing utilisateur) pour afficher les mesures User Timing (Timing utilisateur) dans les onglets Summary (Récapitulatif), Bottom-Up (De bas en haut), Call Tree (Arbre des appels) et Event Log (Journal des événements).

Affichage des mesures du temps utilisateur dans l'onglet "De bas en haut".

Figure 8. Affichage des mesures de temps utilisateur dans l'onglet De bas en haut. La barre bleue à gauche de la section Timing utilisateur indique qu'elle est sélectionnée.

En général, vous pouvez désormais sélectionner l'une des sections (Thread principal, Timing utilisateur, GPU, ScriptStreamer, etc.) et afficher l'activité de cette section dans les onglets.

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

Le panneau Mémoire liste désormais clairement toutes les instances de VM JavaScript associées à une page, au lieu de les masquer derrière le menu déroulant Cible comme auparavant.

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

Figure 9. Dans l'ancienne interface utilisateur à 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.

À côté de l'instance developers.google.com, vous trouverez deux valeurs : 8.7 MB et 13.3 MB. La valeur de gauche représente la mémoire allouée en raison de JavaScript. La valeur de droite représente toute la mémoire de l'OS allouée à cette instance de VM. La valeur de droite inclut la valeur de gauche. Dans le Gestionnaire des tâches de Chrome, la valeur de gauche correspond à JavaScript Memory et celle de droite à Memory Footprint.

L'onglet "Réseau" a été renommé "Page"

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

Deux fenêtres d'outils de développement côte à côte, montrant 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

Chrome 67 inclut un certain nombre de modifications mineures du thème sombre. Par exemple, les icônes de point d'arrêt et la ligne d'exécution actuelle sont désormais vertes.

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

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

Transparence des certificats dans le panneau "Sécurité"

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

Informations sur la transparence des certificats dans le panneau "Sécurité".

Figure 12. Informations sur la transparence des certificats dans le panneau "Sécurité"

Isolation de sites dans le panneau "Performances"

Si vous avez activé l'isolation de sites, le panneau Performances fournit désormais un graphique en flammes pour chaque processus. Vous pouvez ainsi voir la charge de travail totale de chaque processus.

Graphiques en flammes par processus dans un enregistrement des performances.

Figure 13. Graphiques de type "flamme" par processus dans un enregistrement des performances

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.

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.