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

Sofia Emelianova

Inspecter le positionnement de l'ancrage CSS dans le panneau "Elements"

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.

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

Améliorations apportées au panneau "Sources"

Cette version apporte plusieurs améliorations au panneau Sources.

Amélioration "Ne jamais mettre en pause ici"

"Une pause sans interruption" vous permet d'éviter que Debugger ne s'arrête 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.
• "Annulation en cours" Points d'arrêt pour les violations DOM, retrieve/XHR et CSP.
• 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 page Sources > Points d'arrêt de l'écouteur d'événements > La liste de 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 d'une manière qui entraîne son alignement sur un nouvel élément.

Problème Chromium: 40286359.

Améliorations du panneau "Network"

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

Mise à jour des préréglages de limitation de la bande passante réseau

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 (4G lente) et Slow 3G (3G lente) s'appellent 3G. Cela correspond mieux aux préréglages de Lighthouse.

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 "Performance"

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 :

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'appel: suppression du suffixe (async) dans les descriptions de frame d'appel asynchrone et mise en gras de la mise en surbrillance (343750870) au lieu d'italique.
• 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 streaming du contenu des réponses pour les requêtes qui venaient de démarrer sans recevoir 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'assistance à côté de tous les onglets.

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 vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème 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.

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