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 les identifiants d'ancres explicites et les ancres implicites à leurs nœuds.

Avant et après l'association d'ancres explicites et implicites.

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

Les éléments "before" et "after" associent le popovertarget à son élément popover.

Améliorations apportées au panneau "Sources"

Cette version apporte plusieurs améliorations au panneau Sources.

Fonctionnalité "Ne jamais suspendre ici" améliorée

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 l'utilisation des points d'arrêt non pertinents qui se déclenchent à plusieurs reprises. Cette version améliore cette fonctionnalité, qui est désormais compatible avec les éléments suivants :

  • Exceptions ou rejets de promesses provenant de fonctions intégrées.
  • Annulation des points d'arrêt DOM, fetch/XHR et de cas de non-respect de la CSP.
  • Dans le désassemblage Wasm.

Découvrez le workflow en action :

Problème Chromium : 40924349.

Nouveaux écouteurs d'événements de défilement avec alignement

La liste Sources > Points d'arrêt de l'écouteur d'événement > Contrôle contient 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'aligne sur un nouvel élément.

Avant et après l'ajout d'écouteurs d'événements liés à scroll-snap.

Problème Chromium : 40286359.

Améliorations apportées au panneau "Réseau"

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

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

Le panneau Réseau est mis à jour avec de nouveaux préréglages de limitation du débit : 4G rapide, 3G rapide renommé 4G lente et 3G lente renommé 3G. Cela correspond mieux aux préréglages de Lighthouse.

Avant et après la mise à jour des préréglages de limitation du 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 service workers, y compris les timings, 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 Performances capture désormais les événements Envoyer un message WebSocket et Recevoir un message WebSocket, et les affiche dans la trace de performances. Exemple :

Événement "Recevoir un message WebSocket" capturé dans la trace de performances.

Problème Chromium : 40286129.

Autres points importants

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 parcourez le journal avec les 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 : le suffixe (async) a été supprimé des descriptions des frames d'appels asynchrones, et leur mise en évidence est passée de l'italique au gras (343750870).
  • Mémoire : suppression de l'élément InternalNodes de taille nulle inutile de l'Résumé de l'instantané du tas (340200025).
  • Réseau : correction d'un bug qui empêchait l'aperçu du contenu de la réponse de streaming pour les requêtes qui venaient de commencer, mais qui n'avaient pas encore reçu d'événement responseReceived (338340752).
  • Performances :
    • Statistiques du sélecteur : ajout d'un info-bulle explicatif pour la colonne %-of-Slow-Path-Non-Matches (324282954).
    • Mode de configuration des pistes : le bouton Terminer la configuration des pistes 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 Précédent/Suivant (40894153).
  • Paramètres : des icônes d'aide ont été ajoutées à côté de tous les onglets.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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 sujets abordés dans la série Nouveautés de DevTools.