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

Recherche du texte "cache-control" avec le nouveau volet Network Search.

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

Cliquez sur Respecter la casse Respecter la casse pour effectuer votre requête. sensible à la casse. Cliquez sur Utiliser une expression régulière. 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.

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. Il maintenant imprime également le joli résultat pour faciliter la numérisation.

L'ancienne et la nouvelle interface utilisateur.

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.

Exemple de valeurs de couleur des variables CSS.

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

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 correspondant à votre audit. dans le panneau Performances.

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 est remplacé par Reprendre Exécution du script Reprendre.
  3. Suspendre Reprendre l'exécution du script Reprendre, puis sélectionnez Arrêter Appel JavaScript actuel Arrêter.

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) Arrêter é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.

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

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

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