Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

Limiter les requêtes WebSocket

Le panneau Network prend désormais en charge la limitation des requêtes Web Socket. Auparavant, la limitation du réseau ne fonctionnait pas sur les requêtes WebSocket.

Ouvrez le panneau Network (Réseau), cliquez sur une requête de socket Web et 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 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, page de démonstration). Dans le panneau Application, faites défiler la page jusqu'à la section Services d'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 offre un aperçu de tous les points de terminaison configurés dans l'en-tête Reporting-Endpoints.

Volet API Reporting

Problème Chromium: 1205856

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

Lors de la relecture d'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 faire défiler automatiquement l'élément dans la fenêtre d'affichage avant de relancer l'étape. Auparavant, la relecture échouait immédiatement.

Voici un exemple de menu hors écran positionné en dehors de la fenêtre d'affichage et glissant lorsqu'il est activé. Le flux utilisateur consiste à activer/désactiver le menu et à cliquer sur l'élément de menu. Auparavant, la relecture échouait à la dernière étape, car l'élément de menu glisse toujours et n'est 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, du formatage et du filtrage dans la console

Styliser correctement les messages de journal avec le code d'échappement ANSI

Vous pouvez maintenant utiliser les séquences d'échappement ANSI pour appliquer un style approprié aux messages de la console. Auparavant, la compatibilité de la console DevTools avec les séquences d'échappement ANSI était très limitée (et en partie défaillante).

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

Grâce à ces modifications, vous pouvez désormais déboguer facilement vos applications Node.js à l'aide des outils de développement, avec des messages de console colorés. Ouvrez cette démonstration pour la voir 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 Mettre en forme et styliser les messages dans la console.

style console

Problèmes liés à Chromium: 1282837, 1282076

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

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

prendre en charge les spécificateurs de format dans le message de la console

Problèmes liés à Chromium: 1277944, 1282076

Filtre de groupe de la console plus intuitif

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

Par ailleurs, si un message de console s'affiche, le groupe (ou le groupe ancêtre) auquel il appartient s'affiche également.

filtre de groupe de la console

Problème Chromium: 1068788

Améliorations apportées aux cartes sources

Déboguer l'extension Chrome avec les fichiers de carte source

Vous pouvez maintenant déboguer l'extension Chrome avec les fichiers de mappage source. Auparavant, les outils de développement n'acceptaient que le mappage source intégré pour le débogage des extensions Chrome.

Déboguer l'extension Chrome avec les fichiers de carte source

Problème Chromium: 212374

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

L'arborescence des dossiers sources du panneau Sources a été améliorée.Les structures et les noms des dossiers ont été simplifiés (par exemple, "../", "./", etc.). En arrière-plan, cela est dû à la normalisation des URL sources absolues dans les mappages sources.

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

Problème Chromium: 1284737

Afficher les fichiers sources des workers dans le panneau des sources

Les fichiers sources des nœuds de calcul (par exemple, nœud de calcul ou service worker) avec l'URL SourceURL relative sont désormais affichés dans le panneau Source. Auparavant, les fichiers sources des nœuds de calcul n'étaient pas gérés correctement.

ALT_TEXT_HERE

Problème Chromium: 1277002

Mises à jour du thème sombre automatique dans Chrome

L'interface utilisateur Émulation du thème sombre automatique est désormais simplifiée. Désormais, il s'agit d'une case à cocher, et auparavant d'un menu déroulant.

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

Chrome 96 introduit une phase d'évaluation 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 à 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 divisé

Sur les appareils tactiles, vous pouvez désormais sélectionner une couleur et redimensionner le panneau des outils de développement avec vos doigts ou un stylet.

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

Problèmes liés à Chromium: 1284245, 1284995

Points forts divers

Voici quelques correctifs importants dans cette version:

Correction du problème de modification des cookies dans le volet Cookies. (1290196).
Appuyez sur Shift+Tab pour sélectionner la commande précédente dans le menu Commandes. (1278743).
Signalez les problèmes liés aux requêtes CORS préliminaires dans l'onglet Issues (Problèmes). (1272445).
Signalez les problèmes de User-Agent Client Hints dans l'onglet Issues (Problèmes). (1219359).
Correction des comportements Shift + Delete et Page up / Page down dans le panneau Sources et Console. (1278461, 1285662).
Fermez la boîte de dialogue de modification du point d'arrêt lors de la suppression du point d'arrêt dans le panneau Sources. (922513)
Aucune actualisation n'est nécessaire pour changer le thème clair/sombre dans les outils de développement. (1278738).

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