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 (Réseau) prend désormais en charge la limitation des requêtes WebSocket. 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 WebSocket et ouvrez l'onglet Messages pour observer le transfert des 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-conformité de votre page, les appels d'API obsolètes et plus encore.

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, ainsi que leur état. Cliquez dessus pour afficher les détails du rapport.

La section Points de terminaison présente 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 "Enregistreur"

Lorsque vous relancez un enregistrement de parcours utilisateur, le panneau Enregistreur attend maintenant 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 répéter 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 qui s'affiche 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. Ce 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

Appliquer un style approprié aux messages de journal avec un code d'échappement ANSI

Vous pouvez désormais utiliser les séquences d'échappement ANSI pour styliser correctement les messages de la console. Auparavant, la compatibilité de la console des outils de développement avec les séquences d'échappement ANSI était très limitée (et partiellement indisponible).

Les développeurs Node.js ont tendance à colorer les messages de journal via des séquences d'échappement ANSI, souvent à l'aide de bibliothèques de styles comme chalk, 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 approprié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 Mettre en forme et styliser les messages dans la documentation de la console.

style pour console

Problèmes Chromium: 1282837, 1282076

Compatibilité avec les 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 Console Standard. Auparavant, le résultat de la conversation était incohérent.

Prise en charge des spécificateurs de format dans Console Messege

Problèmes Chromium: 1277944, 1282076

Filtre de groupe de console plus intuitif

Lors du filtrage du 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 le groupe ancêtre) 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 ancêtre) auquel il appartient l'est également.

filtre de groupe de la console

Problème Chromium: 1068788

Améliorations apportées aux cartes sources

Déboguer l'extension Chrome avec des fichiers de carte sources

Vous pouvez désormais déboguer l'extension Chrome avec des fichiers de carte sources. 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 des fichiers de carte sources

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 plus claire au niveau des structures et des noms de dossiers (par exemple, "../", "./", etc.). Cette approche est le 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 des nœuds de calcul (par exemple, un nœud de calcul Web ou un service worker) avec une URL Source 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 de Chrome

L'interface utilisateur d'émulation du thème sombre automatique est désormais simplifiée. Il s'agit désormais d'une case à cocher, auparavant d'une liste déroulante.

De plus, lorsque le thème sombre automatique est activé, le menu déroulant Emulate preferences-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. 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 automatique du thème sombre

Problème Chromium: 1243309

Sélecteur de couleur et volet fractionné conviviaux

Vous pouvez désormais sélectionner une couleur et redimensionner le panneau dans les outils de développement avec vos 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

Points importants 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 Commande. (1278743).
Signalez les problèmes de requête CORS préliminaire dans l'onglet Issues (Problèmes). (1272445).
Signalez les problèmes liés aux indicateurs client User-Agent dans l'onglet Problèmes. (1219359).
Correction des comportements Shift + Delete et Page up / Page down dans les panneaux Sources et Console (1278461, 1285662)
Fermer la boîte de dialogue de modification du point d'arrêt lors de la suppression d'un point d'arrêt dans le panneau Sources (922513)
Aucune actualisation n'est requise lorsque vous basculez le thème clair ou sombre dans les outils de développement. (1278738).

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.