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

Kayce Basques

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

• Rechercher dans tous les en-têtes réseau
• Aperçus des valeurs de variables CSS dans le volet Styles
• Copier en tant que fetch
• Nouveaux audits, options de configuration pour ordinateur et traces d'affichage
• Arrêter les boucles infinies
• Temps utilisateur dans les onglets Performances
• Instances de VM JavaScript clairement répertoriées dans le panneau Memory (Mémoire)
• L'onglet Network (Réseau) du panneau Sources a été renommé Page (Page).
• Mise à 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 Network (Réseau), puis appuyez sur Commande+F (Mac) ou Ctrl+F (Windows, Linux, ChromeOS) pour ouvrir le nouveau volet Network Search (Recherche dans le réseau). DevTools recherche la requête que vous fournissez dans les en-têtes et le corps de toutes les requêtes réseau.

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

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

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

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 dans le réseau. Il affiche désormais également les résultats de manière lisible 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 Command (Commande).

Aperçus des valeurs de 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, DevTools affiche désormais un aperçu de cette couleur.

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

Copier en tant que fetch

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.

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

DevTools produit 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" (Audits)

Nouveaux audits

Le panneau Audits comporte deux nouveaux audits, dont:

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

Nouvelles options de configuration

Vous pouvez désormais configurer le panneau Audits pour:

• Conservez les paramètres de la vue 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 du processeur.
• Préservez l'espace de stockage, tel que LocalStorage et IndexedDB, pour tous les audits.

Figure 6. Nouvelles options de configuration d'audit

Afficher les traces

Après avoir effectué un audit d'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.

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 désormais:

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

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 Arrêter l'appel JavaScript en cours a été sélectionné.

Durée de session utilisateur dans les onglets "Performances"

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

Figure 8. Afficher les mesures de temps utilisateur dans l'onglet Ascendant La barre bleue à gauche de la section User Timing (Temps de l'utilisateur) indique qu'elle 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 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.

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 s'affichent dans le tableau Sélectionner une instance de VM JavaScript.

À côté de l'instance developers.google.com, deux valeurs sont affichées: 8.7 MB et 13.3 MB. La valeur de gauche représente la mémoire allouée en raison de JavaScript. La valeur correcte 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 de tâches de Chrome, la valeur de gauche correspond à JavaScript Memory et la valeur de droite correspond à Memory Footprint.

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

Dans le panneau Sources, l'onglet Réseau est désormais appelé Page.

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

Mises à jour du thème sombre

Chrome 67 apporte plusieurs 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é affiche désormais des informations sur la transparence des certificats.

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 en forme de flamme pour chaque processus afin que vous puissiez voir le travail total généré par chaque processus.

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

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes 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 vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés dans les outils de développement ou sur les vidéos YouTube de 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 concernant les outils de développement