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

Voici les nouvelles fonctionnalités et les principales modifications apportées 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 volet Recherche de 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" dans le nouveau volet "Recherche de réseau"...

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

Cliquez sur Respecter la casse Respecter la casse pour rendre 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 correspondant au 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 "Recherche de réseau".

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

L'interface utilisateur du volet Recherche globale correspond désormais à celle du nouveau volet Recherche sur le réseau. Désormais, elle imprime également les résultats pour en faciliter le scan.

Ancienne et nouvelle interface utilisateur

Image 3. L'ancienne interface utilisateur à gauche et la nouvelle à droite

Appuyez sur Cmd+Option+F (Mac) ou sur Ctrl+Maj+F (Windows, Linux, ChromeOS) pour ouvrir la recherche globale. Vous pouvez également l'ouvrir via le menu Commandes.

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

Exemple de valeurs de couleur variables CSS

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

Copier en tant que récupération

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 dans votre presse-papiers le code fetch() équivalent pour cette requête.

Copie du 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 les suivants:

Nouvelles options de configuration

Vous pouvez désormais 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 le panneau Audits de simuler un appareil mobile.
  • Désactivez la limitation du réseau et du processeur.
  • Préservez l'espace de stockage, tel que LocalStorage et IndexedDB, lors des audits.

Nouvelles options de configuration d'audit

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 de performances de chargement sur lesquelles votre audit est basé 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 ou 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 devient Resume Script Execution (Reprendre l'exécution du script) Réactiver.
  3. Mettez en attente Resume Script Execution (Reprendre l'exécution du script) Réactiver, puis sélectionnez Stop Current JavaScript Call (Arrêter l'appel JavaScript actuel) Arrêter.

Dans la vidéo ci-dessus, l'horloge est mise à jour via un minuteur setInterval(). Cliquez sur Start Infinite Loop (Démarrer une 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 Stop Current JavaScript Call (Arrêter l'appel JavaScript actuel) Arrêter a été sélectionnée.

Temps utilisateur dans les onglets "Performances"

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

Affichage des mesures de temps utilisateur dans l'onglet ascendant.

Figure 8 : Afficher les mesures de temps utilisateur dans l'onglet Ascendant. La barre bleue à gauche de la section Temps utilisateur indique que cette fonctionnalité 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) indique désormais clairement toutes les instances de VM JavaScript associées à une page, au lieu de les masquer derrière le menu déroulant Target (Cible), comme auparavant.

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

Figure 9. Dans l'ancienne interface utilisateur de gauche, les instances de VM JavaScript sont cachées derrière le menu déroulant Target (Cible), tandis que dans la nouvelle interface utilisateur à droite, elles sont affichées dans la table Select JavaScript VM Instance (Sélectionner une instance de VM JavaScript).

Deux valeurs sont affichées à côté de l'instance developers.google.com: 8.7 MB et 13.3 MB. La valeur de gauche représente la mémoire allouée en raison de JavaScript. La bonne valeur représente toute la mémoire du système d'exploitation 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 à Memory Footprint.

Onglet "Réseau" renommé "Onglet "Page"

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

Deux fenêtres DevTools côte à côte, montrant le changement de nom

Figure 10 : Dans l'ancienne interface utilisateur de 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.

Modifications apportées au thème sombre

Un certain nombre de modifications mineures ont été apportées au jeu de couleurs du thème sombre dans Chrome 67. Par exemple, les icônes des points d'arrêt et la ligne d'exécution en cours sont désormais vertes.

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

Figure 11 : Capture d'écran du nouveau 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 certifications dans le panneau "Sécurité"

Isolation de sites dans le panneau "Performances"

Si l'isolation de sites est activée, le panneau Performances fournit à présent un graphique de type "flamme" pour chaque processus, afin que vous puissiez voir le travail total causé par chaque processus.

Graphiques de type "flamme" par processus dans un enregistrement de performances

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

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

  • Envoyez-nous une suggestion ou des commentaires via crbug.com.
  • Signalez un problème dans les outils de développement via Plus d'options   More > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
  • Envoyez un tweet à @ChromeDevTools.
  • Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.

Nouveautés des outils de développement

Liste des points abordés dans la série Nouveautés des outils de développement.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59