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

Sofia Emelianova
Sofia Emelianova
GitHub

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Liens d'origine et de script pour les appels de profil et de fonction dans "Performances"

L'onglet Performances > Récapitulatif affiche désormais des liens vers les scripts et les origines pertinents pour les appels de profil et de fonction. Vous n'avez donc plus besoin de pointer sur ces événements dans le canal Principal.

État avant et après l'ajout de la source et de l'origine dans l'onglet "Synthèse".

De plus, les canaux Réseau et Principal affichent désormais les noms tiers, le cas échéant, dans les info-bulles lorsque vous pointez sur des événements.

Problème Chromium: 368541957.

Compatibilité avec les données du champ "LCP par phase"

Lorsque les données de terrain sont activées, l'insight Performances > Insights > LCP par phase affiche désormais les temps d'affichage des images au 75e percentile du rapport d'expérience utilisateur Chrome dans un tableau supplémentaire. Vous pouvez ainsi comparer les temps directement dans l'insight.

Avant et après l'ajout de la prise en charge des données de terrain à l'insight "LCP par phase".

"Arborescence des dépendances réseau"

L'onglet Performances > Insights ajoute l'insight Arbre des dépendances réseau à sa collection. Cet insight vous indique si vous avez créé des chaînes de requêtes critiques, ce qui n'est pas recommandé. Pointez sur les requêtes listées dans l'insight pour les voir mises en surbrillance dans le canal Network (Réseau).

Pour en savoir plus, consultez Éviter de créer des chaînes de requêtes critiques.

Mise en surbrillance de la pile la plus lourde

Le panneau Performances met désormais en surbrillance les éléments de la piste Principale lorsque vous pointez dessus dans la barre latérale Arbre d'appels ou De bas en haut > Pile la plus lourde, et assombrit le reste. Vous pouvez ainsi identifier visuellement les éléments imbriqués dans la pile d'appels qui prennent le plus de temps.

Arborescence d'accessibilité dans Elements

La vue de l'arborescence d'accessibilité en pleine page est désormais activée par défaut dans le panneau Éléments. Il vous permet d'inspecter la façon dont les technologies d'assistance voient votre contenu, et affiche les attributs ARIA et les propriétés d'accessibilité calculées des nœuds DOM.

Pour ouvrir l'arborescence d'accessibilité, cliquez sur le bouton Passer à l'arborescence d'accessibilité en haut à droite de l'arborescence DOM dans le panneau Éléments.

Avant et après l'activation de l'arborescence d'accessibilité en pleine page par défaut

Pour en savoir plus, consultez Arbre d'accessibilité complet dans les outils pour les développeurs Chrome.

Problème Chromium: 40808541.

Amélioration des états vides pour divers panneaux

Les états vides (lorsque rien n'est ouvert) de divers panneaux, sections et onglets ont été simplifiés pour vous indiquer exactement ce que vous devez faire pour commencer à les utiliser. Certains états vides, par exemple dans le panneau Network (Réseau), comportent désormais des boutons utiles pertinents, tels que Reload page (Actualiser la page).

État avant et après l'amélioration des états vides dans les panneaux "Réseau" et "Recherche".

L'option "Demander à l'IA" a été déplacée en bas du menu

L'option Demander à l'IA se trouve désormais en bas des menus déroulants, et non plus en haut.

Avant et après avoir déplacé l'option "Demander à l'IA" en bas du menu déroulant.

N'hésitez pas à nous faire part de vos commentaires sur le panneau Assistance par IA sur crbug.com/364805393.

Lighthouse 12.4.0

Le panneau Lighthouse exécute désormais Lighthouse 12.4.0.

Cette version marque certains audits de performances comme informatifs dans les conditions de réussite, au lieu de les masquer dans la section "Audits réussis". Consultez la liste complète des modifications.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 40543651.

Autres points forts

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

  • Performances > Récapitulatif: remplacement des deux lignes Durée totale et Durée propre par une ligne Durée qui affiche également (self time) entre parenthèses, le cas échéant (crbug.com/395572753).
  • Problèmes: ajout de nouveaux types de problèmes: problèmes <select> dans l'arborescence d'accessibilité et erreurs de signature de message SRI qui se produisent lors de l'analyse ou de la validation dans le service réseau (crbug.com/381044049, crbug.com/347890366).
  • Accessibilité: l'onglet Éléments > Styles indique désormais les éléments que vous parcourez à l'aide de la navigation au clavier (crbug.com/396311936).
  • Éléments: les problèmes liés à <select> sont désormais pris en charge et mis en évidence par un trait de soulignement en forme de vague (crbug.com/378738916).
  • Réseau: le point de forçage et les icônes d'avertissement concernant les cookies s'affichent désormais à droite du nom de l'onglet, et non à gauche (crbug.com/390556283).

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.