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

Kayce Basques

Les nouvelles fonctionnalités et les modifications majeures apportées aux outils de développement dans Chrome 67 sont les suivantes :

• Rechercher dans tous les en-têtes réseau
• Aperçus des valeurs des variables CSS dans le volet Styles
• Copier en tant que fetch
• Nouveaux audits, options de configuration pour ordinateur et affichage des traces
• Arrêter les boucles infinies
• Temps utilisateur dans les onglets Performances
• Instances de VM JavaScript clairement listées dans le panneau Mémoire
• L'onglet Network (Réseau) du panneau Sources a été renommé Page.
• Mises à jour du thème sombre
• Informations sur la transparence des certificats dans le panneau Sécurité
• Fonctionnalités d'isolation de sites dans le panneau Performances

Version vidéo des notes de version :

Rechercher dans tous les en-têtes et réponses réseau

Ouvrez le panneau Réseau, puis appuyez sur Commande+F (Mac) ou Ctrl+F (Windows, Linux, ChromeOS) pour ouvrir le nouveau volet Recherche sur le 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.

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

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

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

Mises à jour de l'interface utilisateur du volet de recherche

L'interface utilisateur du volet Recherche globale correspond désormais à celle du nouveau volet Recherche sur le réseau. Il affiche désormais les résultats sous forme d'impression élégante pour faciliter la lecture.

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 de commande.

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.

Figure 4. Dans l'ancienne UI à gauche, il n'y a pas d'aperçu de couleur à côté de color: var(--main-color), alors que dans la nouvelle UI à droite, il y en a un.

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.

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 apportées au panneau "Audits"

Nouveaux audits

Le panneau Audits comporte deux nouveaux audits, dont :

• Précharger les requêtes clés Le préchargement des requêtes peut accélérer le temps de chargement des pages en indiquant au navigateur de télécharger dès que possible les ressources importantes pour votre chemin de rendu critique.
• Évitez le texte invisible pendant le chargement des polices Web. En veillant à ce que le texte soit visible pendant le chargement des polices Web, vous permettez aux utilisateurs de profiter plus rapidement de la page.

Nouvelles options de configuration

Vous pouvez désormais configurer le panneau Audits pour :

• Conservez les paramètres de la fenêtre d'affichage et du user-agent 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 CPU.
• Conservez l'espace de stockage, tel que LocalStorage et IndexedDB, entre les audits.

Figure 6. Nouvelles options de configuration d'audit

Afficher les traces

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

Figure 7 : Bouton Afficher la trace

Arrêter les boucles infinies

Si vous utilisez souvent 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 Mettre en veille . Le bouton devient Reprendre l'exécution du script .
3. Maintenez le bouton Reprendre l'exécution du script enfoncé, puis sélectionnez Arrêter l'appel JavaScript actuel .

Dans la vidéo ci-dessus, l'horloge est mise à jour via un minuteur setInterval(). Cliquez sur Démarrer la 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 Arrêter l'appel JavaScript actuel 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é, Bottom-Up, Arborescence des appels et Journal des événements.

Figure 8. Affichage des mesures de temps utilisateur dans l'onglet Bottom-Up (Ascendant). La barre bleue à gauche de la section Temps utilisateur indique qu'elle est sélectionnée.

En général, vous pouvez désormais sélectionner n'importe quelle section (Main Thread, 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 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.

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

À côté de l'instance developers.google.com, il y a 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 en raison de 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.

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

Mises à jour du thème sombre

Chrome 67 apporte un certain nombre de modifications mineures au jeu de couleurs 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.

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é indique désormais des informations sur la transparence des certificats.

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 site, le panneau Performances fournit désormais un graphique de flammes pour chaque processus, ce qui vous permet de voir la charge de travail totale générée par chaque processus.

Figure 13. Graphiques de flammes 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 de preview vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester des API de plate-forme Web de pointe et vous aident à 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, des mises à jour ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos commentaires et demandes de fonctionnalités sur crbug.com.
• Signalez un problème lié aux outils de développement en accédant à more_vert Autres options > Aide > Signaler un problème lié aux outils de développement 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 de développement

Liste de tout ce qui a été abordé dans la série Nouveautés des outils de développement.