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 permet désormais d'associer les identifiants d'ancre explicites et les 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 pause ici" vous permet d'empêcher le débogueur de mettre en pause la même ligne à plusieurs reprises. Cela facilite le travail avec les points d'arrêt non pertinents qui se déclenchent de manière répétée. Cette version améliore cette fonctionnalité et fonctionne désormais pour:

  • Exceptions ou refus de promesse à partir de fonctions intégrées.
  • "Annuler" les points d'arrêt DOM, fetch/XHR et cas de non-respect du CSP.
  • Dans le démontage Wasm.

Découvrez le workflow en action:

Problème Chromium: 40924349.

Nouveaux écouteurs d'événements de repère de défilement

La liste Sources > Points d'arrêt de l'écouteur d'événements > Contrôle reçoit 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 glissement.

Problème Chromium: 40286359.

Améliorations apportées au panneau "Network" (Réseau)

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

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

Les préréglages de limitation du débit du panneau Réseau ont été mis à jour: nouveau paramètre 4G rapide, 3G rapide renommé en 4G lente et 3G lente renommé en 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 du format HAR

Lorsque vous exportez le journal réseau au format HAR, vous pouvez désormais afficher les informations liées aux services workers, y compris les délais, sous forme de champs personnalisés (préfixés par des traits d'union). 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 Performances capture désormais les événements Envoyer un message WebSocket et Recevoir un message WebSocket, et les affiche dans le trace des performances. Exemple :

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

Problème Chromium: 40286129.

Autres points forts

Voici quelques corrections et améliorations importantes apportées à cette version:

  • Accessibilité: les lecteurs d'écran annoncent désormais le contenu des messages dans la Console lorsque vous faites défiler le journal à l'aide des touches fléchées vers le haut et vers le bas (344484979).
  • Sources :
    • Page: l'option de menu Enregistrer sous enregistre désormais les fichiers de module Wasm en tant que binaires Wasm valides au lieu de texte 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 des InternalNodes inutiles de taille nulle de l'instantané de tas de mémoire Récapitulatif (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 des canaux: le bouton Terminer la configuration des canaux a été déplacé en bas à droite (345256274).
  • Console: correction d'un bug qui affichait plusieurs messages de console identiques lors de la navigation à l'aide du cache avant/arrière (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 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.