Nouveautés des outils pour les développeurs, Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Origines préconnectées dans l'insight "Arborescence des dépendances réseau"

L'insight Performances > Insights > Arborescence des dépendances réseau affiche désormais la liste des origines préconnectées utilisées ou inutilisées, et des candidats à la préconnexion, le cas échéant.

Les hints de préconnexion permettent à votre site d'établir des connexions précoces avec des origines tierces importantes et d'améliorer la vitesse de chargement des pages.

Avant et après l'ajout d'origines et de candidats préconnectés à l'insight "Arborescence des dépendances réseau".

Pour en savoir plus, consultez Établir des préconnexions aux origines requises.

Temps de réponse et de redirection du serveur dans l'insight "Latence des requêtes de document"

L'insight Performances > Insights > Latence des requêtes de documents affiche désormais le temps de réponse du serveur et, le cas échéant, le nombre de redirections et le temps de redirection.

Avant et après l'ajout des temps de réponse du serveur et de redirection à l'insight "Latence des requêtes de document".

Redirections dans le récapitulatif des requêtes réseau

Le panneau Performances affiche désormais les URL de redirection dans le récapitulatif des requêtes réseau et dans leurs info-bulles.

Avant et après l'ajout d'URL de redirection aux récapitulatifs et info-bulles des requêtes réseau.

Problème Chromium : 402353313.

Bruit réduit dans la trace de performances

Le panneau Performances n'affichera plus les événements de la catégorie compile du moteur JavaScript V8. Auparavant, ces événements entraînaient beaucoup de surcharge et de bruit inutiles, en particulier l'événement compile code.

Avant et après la suppression des événements "compile code" de la trace de performances.

Si vous constatez que certains événements importants pour vous ont disparu, n'hésitez pas à nous en faire part sur crbug.com/414330508.

Obsolète : "Désactiver les échantillons JavaScript"

L'option Désactiver les échantillons JavaScript dans Performances > Paramètres de capture a été abandonnée et supprimée, car elle était rarement utile et peu utilisée.

Avant et après la suppression de l'option "Désactiver les exemples JavaScript" des "Paramètres de capture".

Problème Chromium : 414734883.

Paramètre de précision de la géolocalisation dans les capteurs

Le panneau Capteurs vous permet désormais de définir la précision de l'émulation de géolocalisation. Vous pouvez ainsi tester la gestion de différents niveaux de précision du GPS.

Avant et après l'ajout du paramètre "Précision" à l'émulation de géolocalisation dans le panneau "Capteurs".

Problème Chromium : 40074843.

Améliorations apportées au panneau "Elements"

Cette version apporte plusieurs améliorations au panneau Éléments.

Déboguer plus facilement les valeurs CSS complexes

Pour vous aider à déboguer des valeurs CSS complexes, l'onglet Éléments > Styles affiche désormais un info-bulle au survol :

  • La chaîne de définition complète des variables CSS, pour que vous n'ayez pas à cliquer sur plusieurs liens.
  • Évaluation pas à pas des calculs CSS complexes, qui vous permet d'identifier les bugs plus efficacement et de mieux comprendre comment une valeur est calculée.

L'info-bulle affiche les chaînes de définitions sur plusieurs lignes, une pour chaque définition. Vous pouvez développer les calculs complexes et pointer sur les valeurs pour mettre en évidence la valeur calculée et remonter à son expression initiale.

Avant et après l'ajout d'un info-bulle avec des chaînes de définitions et des calculs complexes extensibles.

Problème Chromium : 396080529.

Compatibilité avec @function dans Éléments > Styles

En vue de la prise en charge de @function dans Chrome, l'onglet Éléments > Styles associe désormais les noms de vos fonctions personnalisées à leurs définitions dans une section dédiée.

Avant et après l'association du nom de votre fonction personnalisée à la section correspondante.

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

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

has-request-header filtre

Le panneau Réseau est désormais compatible avec le filtre has-request-header, qui vous permet de filtrer les résultats par nom d'en-tête de requête spécifique.

Avant et après l'ajout du filtre "has-request-header" au panneau "Réseau".

Problème Chromium : 397481040.

Direct Sockets dans les applications Web isolées

Dans le panneau Réseau, vous pouvez désormais surveiller le trafic des applications Web isolées (IWA) via TCPSocket, UDPSocket (en mode entrant) et UDPSocket (en mode connecté).

Pour ce faire, sélectionnez une connexion directscoket à côté des demandes standards dans le tableau, puis sélectionnez un message dans l'onglet Messages.

Avant et après l'ajout de la compatibilité avec les sockets directs dans les IWA au panneau "Réseau".

Les applications Web isolées (AWI) fournissent un modèle de sécurité à haut niveau de confiance pour les applications Web. Pour en savoir plus, consultez Premiers pas avec les applications Web isolées et l'application de démonstration qui implémente l'API Direct Sockets.

Autres points importants

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

  • Application > Stockage : l'option Web SQL obsolète a été supprimée (crbug.com/412707590).
  • Éléments :
  • Réseau : l'en-tête HTTP Referrer-Policy a été supprimé de l'option Copier en tant que récupération, car il s'agit d'un en-tête de réponse permettant de contrôler le comportement du navigateur, et non d'une instruction côté client (crbug.com/413904896).
  • Performances : suppression des avertissements de "tâche longue" des threads de worker, car ils ne bloquent pas les threads principaux (crbug.com/40248589).
  • Problèmes. Rapports "Maintenant" :
    • Si des ressources suspectées de suivre les utilisateurs sont bloquées.
    • Mesures d'atténuation du suivi des rebonds, qu'ils accèdent ou non au stockage lors d'une redirection.
  • Accessibilité. Les éléments suivants de Éléments > Styles sont désormais accessibles au clavier :

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.