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

Jecelyn Yeen

Limiter les requêtes WebSocket

Le panneau Réseau est désormais compatible avec la limitation des requêtes de socket Web. Auparavant, la limitation du réseau ne fonctionnait pas pour les requêtes de socket Web.

Ouvrez le panneau Réseau, cliquez sur une requête de socket Web, puis ouvrez l'onglet Messages pour observer les transferts de messages. Sélectionnez 3G lente pour limiter la vitesse.

Limiter les requêtes WebSocket

Problème Chromium : 423246

Nouveau volet "API Reporting" dans le panneau "Application"

Utilisez le nouveau volet API Reporting pour surveiller les rapports générés sur votre page et leur état.

L'API Reporting est conçue pour vous aider à surveiller les failles de sécurité de votre page, les appels d'API obsolètes et plus encore.

Ouvrez une page qui utilise l'API Reporting (par exemple, la page de démonstration). Dans le panneau Application, faites défiler la page jusqu'à la section Services en arrière-plan, puis sélectionnez le panneau API Reporting.

La section Rapports affiche la liste des rapports générés sur votre page et leur état. Cliquez dessus pour afficher les détails du rapport.

La section Points de terminaison vous offre un aperçu de tous les points de terminaison configurés dans l'en-tête Reporting-Endpoints.

Volet de l'API Reporting

Problème Chromium : 1205856

Prise en charge de l'attente jusqu'à ce qu'un élément soit visible/cliquable dans le panneau "Enregistreur"

Lorsque vous revoyez un enregistrement de parcours utilisateur, le panneau Enregistreur attend désormais que l'élément soit visible ou cliquable dans la fenêtre d'affichage, ou tente de le faire défiler automatiquement dans la fenêtre d'affichage avant de rejouer l'étape. Auparavant, la rediffusion échouait immédiatement.

Voici un exemple de menu hors écran positionné en dehors de la fenêtre d'affichage et qui se déplace vers l'intérieur lorsqu'il est activé. Le parcours utilisateur consiste à activer/désactiver le menu, puis à cliquer sur l'élément de menu. Auparavant, la rediffusion échouait à la dernière étape, car l'élément de menu était toujours en train de glisser et n'était pas encore visible dans la fenêtre d'affichage. Le problème est désormais résolu.

Problème Chromium : 1257499

Amélioration du style, de la mise en forme et du filtrage de la console

Mise en forme correcte des messages de journal avec le code d'échappement ANSI

Vous pouvez désormais utiliser les séquences d'échappement ANSI pour mettre en forme correctement les messages de la console. Auparavant, la console DevTools ne prenait en charge les séquences d'échappement ANSI que de façon très limitée (et partiellement défectueuse).

Il est courant pour les développeurs Node.js de colorer les messages de journaux à l'aide de séquences d'échappement ANSI, souvent à l'aide de bibliothèques de style telles que chalk, colors, ansi-colors, kleur, etc.

Grâce à ces modifications, vous pouvez désormais déboguer vos applications Node.js de manière fluide à l'aide des outils de développement, avec des messages de console colorés. Ouvrez cette démonstration pour la voir par vous-même.

Pour en savoir plus sur la mise en forme et le style des messages de la console avec les outils de développement, consultez la documentation Mettre en forme et styliser les messages dans la console.

style de la console

Problèmes Chromium : 1282837, 1282076

Prise en charge correcte des spécificateurs de format %s, %d, %i et %f

La console effectue désormais correctement les conversions de type %s, %d, %i et %f, comme spécifié dans la norme de la console. Auparavant, le résultat de la conversation était incohérent.

Prise en charge des spécificateurs de format dans les messages de la console

Problèmes Chromium : 1277944, 1282076

Filtre de groupe de console plus intuitif

Lorsque vous filtrez le message de la console, un message de console s'affiche désormais si le contenu du message correspond au filtre ou si le titre du groupe (ou du groupe parent) correspond au filtre. Auparavant, le titre du groupe de consoles s'affichait malgré le filtre.

De plus, si un message de console s'affiche, le groupe (ou le groupe ancêtre) auquel il appartient est désormais également indiqué.

Filtre de groupe de la console

Problème Chromium : 1068788

Améliorations apportées aux cartes sources

Déboguer une extension Chrome avec des fichiers de carte source

Vous pouvez désormais déboguer les extensions Chrome avec des fichiers de carte source. Auparavant, les outils pour les développeurs n'étaient compatibles qu'avec les sourcemaps intégrés pour le débogage des extensions Chrome.

Déboguer une extension Chrome avec des fichiers de carte source

Problème Chromium : 212374

Arborescence des dossiers sources améliorée dans le panneau "Sources"

L'arborescence des dossiers sources dans le panneau Sources a été améliorée.Les structures et les noms des dossiers sont désormais plus clairs (par exemple, "../", "./", etc.). En coulisses, cela résulte de la normalisation des URL sources absolues dans les cartes sources.

Arborescence des dossiers sources améliorée dans le panneau "Sources"

Problème Chromium : 1284737

Afficher les fichiers sources du worker dans le panneau "Sources"

Les fichiers sources Worker (par exemple, les fichiers sources Web Worker ou Service Worker) avec SourceURL relative sont désormais affichés dans le panneau Source. Auparavant, les fichiers sources du worker n'étaient pas gérés correctement.

ALT_TEXT_HERE

Problème Chromium : 1277002

Mises à jour du thème sombre automatique de Chrome

L'UI d'émulation du thème sombre automatique est désormais simplifiée. Il s'agit désormais d'une case à cocher, alors qu'il s'agissait auparavant d'un menu déroulant.

De plus, lorsque le thème sombre automatique est activé, le menu déroulant Émuler la caractéristique média prefers-color-scheme est désactivé et défini automatiquement sur prefers-color-scheme: dark.

Chrome 96 introduit un Origin Trial pour le thème sombre automatique sur Android. Grâce à cette fonctionnalité, le navigateur applique un thème sombre généré automatiquement aux sites utilisant un thème clair lorsque l'utilisateur a activé les thèmes sombres dans le système d'exploitation.

Émulation du thème sombre automatique

Problème Chromium : 1243309

Sélecteur de couleur et volet fractionné adaptés aux écrans tactiles

Vous pouvez désormais sélectionner une couleur et redimensionner le Tiroir dans les outils de développement avec les doigts ou un stylet sur les appareils à écran tactile.

Voici un exemple de capture d'écran tactile sur un Google Pixelbook.

Problèmes Chromium : 1284245, 1284995

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

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 d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.