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

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

• Rechercher dans tous les en-têtes réseau
• Aperçus des valeurs de variable CSS dans le volet Styles
• Copier en tant que récupération
• Nouveaux audits, options de configuration sur ordinateur et affichage des traces
• 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 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 les en-têtes et les corps de toutes les requêtes réseau pour la requête que vous fournissez.

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

Cliquez sur Respecter la casse pour effectuer votre requête. sensible à la casse. Cliquez sur Utiliser une expression régulière. pour afficher tous les résultats correspondants le modèle que vous fournissez. Vous n'avez pas besoin d'encapsuler votre expression régulière entre des barres obliques.

Figure 2 : Requête d'expression régulière dans le volet de recherche de 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 maintenant imprime également le joli résultat pour faciliter la numérisation.

Figure 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 le menu Mondial Rechercher. 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 un CSS , les outils de développement affichent désormais un aperçu de cette couleur.

Figure 4. Dans l'ancienne interface utilisateur, à gauche, aucun aperçu des couleurs n'est affiché à côté de color: var(--main-color), alors 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 Copier > Copier en tant que récupération pour copier le du code équivalent en fetch() pour cette requête dans le presse-papiers.

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:

• Précharger les requêtes de clé Les demandes de préchargement peuvent accélérer le temps de chargement des pages en fournissant des indications navigateur pour télécharger les ressources importantes pour votre chemin de rendu critique dès que possible.
• Évitez d'afficher du texte invisible lors du chargement des polices Web. Veiller à ce que le texte soit visible le chargement des polices Web rend la page plus utile pour les utilisateurs plus rapidement.

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

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 correspondant à votre audit. 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 maintenant:

1. Ouvrez le panneau Sources.
2. Cliquez sur Mettre en veille . Le bouton est remplacé par Reprendre Exécution du script .
3. Suspendre Reprendre l'exécution du script , puis sélectionnez Arrêter Appel JavaScript actuel .

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

Temps utilisateur dans les onglets "Performances"

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

Figure 8. Afficher les mesures de temps utilisateur dans l'onglet Ascendant La barre bleue située à gauche La section Temps 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 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.

Figure 9. Dans l'ancienne interface utilisateur à gauche, les instances de VM JavaScript sont cachées derrière Menu déroulant Cible, tandis que dans la nouvelle interface utilisateur à droite, ils figurent dans le menu Sélectionner Table des instances de VM JavaScript

Deux valeurs sont affichées à côté de l'instance developers.google.com: 8.7 MB et 13.3 MB. À gauche représente la mémoire allouée par JavaScript. La bonne valeur représente toute la mémoire de l'OS allouée par 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.

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

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

Figure 10 : Dans l'ancienne interface utilisateur, à gauche, l'onglet affichant les ressources de la page s'appelle Réseau, alors que dans la nouvelle interface utilisateur de droite, il s'agit de 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 point d'arrêt et la ligne d'exécution actuelle sont désormais vertes.

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.

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 afin que vous puissiez voir le travail total de chaque processus.

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 vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème 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