Nouveautés des outils de développement, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

Pour vous aider à déboguer plus facilement la fonctionnalité de positionnement des ancres, l'onglet Styles associe désormais des identifiants d'ancrage explicites et des ancres implicites à leurs nœuds.

Liens avant et après avec des ancres explicites et implicites

De plus, la valeur de l'attribut popovertarget fait désormais référence à son élément popover dans le DOM.

Avant et après l'association de popovertarget à son élément popover.

Améliorations apportées au panneau "Sources"

Cette version apporte plusieurs améliorations au panneau Sources.

Amélioration de la fonctionnalité "Ne jamais suspendre ici"

L'option "Ne jamais mettre en veille ici" vous permet d'empêcher le débogueur de s'interrompre sans cesse sur la même ligne. Il est ainsi plus facile de travailler avec des points d'arrêt non pertinents qui se déclenchent de façon répétée. Cette version améliore cette fonctionnalité et fonctionne désormais pour :

  • Exceptions ou promesses de refus des fonctions intégrées.
  • "Canceling" (Annulation) des points d'arrêt DOM, retrieve/XHR et CSP Violation (En cours d'annulation)
  • Lors du démontage de Wasm.

Découvrez le workflow en action:

Problème Chromium: 40924349.

Nouveaux écouteurs d'événements d'ancrage du défilement

La liste Sources > Points d'arrêt de l'écouteur d'événements > Commande dispose de deux écouteurs liés à scroll-snap: scrollsnapchange et scrollsnapchanging. Ces événements se déclenchent lorsque vous faites défiler le conteneur de défilement de manière à ce qu'il s'accroche à un nouvel élément.

État avant et après l'ajout d'écouteurs d'événements liés au point d'ancrage de défilement.

Problème Chromium: 40286359.

Améliorations du panneau "Network"

Cette version apporte plusieurs améliorations au panneau Network (Réseau).

Préréglages de limitation de bande passante réseau mis à jour

Le panneau Network (Réseau) présente de nouveaux préréglages de limitation: les nouveaux paramètres Fast 4G (4G rapide) et Fast 3G (3G rapide) ont été renommés Slow 4G et Slow 3G par 3G. Cela correspond mieux aux préréglages de Lighthouse.

Captures d'écran avant et après la mise à jour des préréglages de limitation du débit réseau

Problème Chromium: 342406608.

Informations sur le service worker dans les champs personnalisés au format HAR

Lorsque vous exportez le journal réseau au format HAR, vous pouvez désormais voir les informations sur les service workers, y compris les codes temporels, sous forme de champs personnalisés (préfixés par des traits de soulignement). Par exemple, vous pouvez trouver les nouveaux champs suivants dans le journal:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Problème Chromium: 342406608.

Envoyer et recevoir des événements WebSocket dans le panneau "Performances"

Comme pour les autres événements WebSocket, le panneau Performance capture désormais les événements Send WebSocket Message (Envoyer un message WebSocket) et Receive WebSocket Message (Recevoir un message WebSocket) et les affiche dans la trace des performances. Exemple :

Événement "Receive WebSocket Message" capturé dans le trace des performances.

Problème Chromium : 40286129.

Points importants divers

Voici quelques correctifs et améliorations importants dans cette version:

  • Accessibilité: les lecteurs d'écran annoncent désormais le contenu des messages dans la console lorsqu'ils font défiler le journal à l'aide des flèches vers le haut et vers le bas (344484979).
  • Sources :
    • Page: l'option de menu Save as (Enregistrer sous) enregistre désormais les fichiers du module Wasm en tant que binaires Wasm valides au lieu de texte en base64 (40784130).
    • Pile d'appels : suppression du suffixe (async) des descriptions de frame d'appel asynchrone, modification de la mise en surbrillance en italique pour la mettre en gras (343750870).
  • Mémoire: suppression de l'InternalNodes inutile de taille nulle dans le résumé des instantanés de segments de mémoire (340200025).
  • Réseau : correction d'un bug qui empêchait l'aperçu du contenu de la réponse en streaming pour les requêtes qui viennent de commencer, mais qui n'ont pas encore reçu d'événement responseReceived (338340752).
  • Performances :
    • Statistiques du sélecteur: ajout d'une info-bulle explicative pour la colonne %-of-Slow-Path-Non-Matches (324282954).
    • Mode de configuration du canal: le bouton Terminer la configuration des canaux a été déplacé en bas à droite (345256274).
  • Console: correction d'un bug qui affichait plusieurs messages identiques dans la console lors de la navigation à l'aide du cache amélioré (40894153).
  • Paramètres: ajout d'icônes d'aide à côté de tous les onglets.

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 plates-formes 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 sujet lié aux outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement