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

Jecelyn Yeen

Limiter les requêtes WebSocket

Le panneau Network (Réseau) est désormais compatible avec le débit limité des requêtes Web Socket. Auparavant, le débit du réseau ne fonctionnait pas avec les requêtes de socket Web.

Ouvrez le panneau Network (Réseau), cliquez sur une requête Web Socket, 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 de l'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 cas de non-respect de la sécurité de votre page, les appels d'API obsolètes, etc.

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 volet 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 donne 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 que l'élément soit visible/cliquable dans le panneau de l'enregistreur

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

Voici un exemple de menu hors écran situé en dehors du viewport et qui glisse vers l'intérieur lorsqu'il est activé. Le parcours utilisateur consiste à activer le menu, puis à cliquer sur l'élément de menu. Auparavant, la lecture ne fonctionnait pas à la dernière étape, car l'élément de menu glissait toujours et n'était pas encore visible dans le viewport. Le problème est maintenant résolu.

Problème Chromium: 1257499

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

Mettre en forme correctement les messages de journal avec le code d'échappement ANSI

Vous pouvez désormais utiliser les séquences d'échappement ANSI pour styliser correctement les messages de console. Auparavant, la console DevTools n'était compatible qu'avec un nombre très limité (et partiellement défectueux) de séquences d'échappement ANSI.

Il est courant que les développeurs Node.js colorient les messages de journal via des séquences d'échappement ANSI, souvent à l'aide de certaines bibliothèques de styles telles que chalk, colors, ansi-colors, kleur, etc.

Grâce à ces modifications, vous pouvez désormais déboguer vos applications Node.js facilement à l'aide de DevTools, avec des messages de console correctement mis en couleur. Ouvrez cette démonstration pour le voir par vous-même.

Pour en savoir plus sur le formatage et le style des messages de la console avec les outils pour les développeurs, consultez la documentation Formater 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 les normes 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 console

Problèmes Chromium: 1277944, 1282076

Filtre de groupe de console plus intuitif

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

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

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 mappage de source

Vous pouvez désormais déboguer une extension Chrome à l'aide de fichiers de mappage source. Auparavant, les outils pour les développeurs n'acceptaient que le mappage de sources intégré pour le débogage des extensions Chrome.

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

Problème Chromium: 212374

Amélioration de l'arborescence des dossiers sources dans le panneau "Sources"

L'arborescence des dossiers sources du panneau Sources est désormais améliorée, avec moins de surcharge dans les structures et les noms de dossiers (par exemple, "../", "./", etc.). En réalité, il s'agit du résultat de la normalisation des URL sources absolues dans les mappages sources.

Amélioration de l'arborescence des dossiers sources dans le panneau "Sources"

Problème Chromium: 1284737

Afficher les fichiers sources des nœuds de calcul dans le panneau "Sources"

Les fichiers sources de nœuds de calcul (par exemple, nœuds de calcul Web, nœuds de calcul de service) avec une SourceURL relative s'affichent désormais dans le panneau Source. Auparavant, les fichiers sources des workers n'étaient pas gérés correctement.

ALT_TEXT_HERE

Problème Chromium: 1277002

Mises à jour du thème sombre automatique de Chrome

L'interface utilisateur de l'é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'une liste déroulante.

En outre, lorsque le thème sombre automatique est activé, le menu déroulant Émuler prefers-color-scheme est désactivé et défini automatiquement sur prefers-color-scheme: dark.

Chrome 96 introduit une phase d'évaluation pour le thème sombre automatique sur Android. Avec cette fonctionnalité, le navigateur applique un thème sombre généré automatiquement aux sites au thème clair lorsque l'utilisateur a activé les thèmes sombres dans le système d'exploitation.

Émulation du mode 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 volet dans DevTools avec les doigts ou un stylet sur les appareils à écran tactile.

Voici un exemple capturé avec l'écran tactile de l'appareil Google Pixelbook.

Problèmes Chromium: 1284245, 1284995

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta 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 plate-forme 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 élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.