Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

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 concernés pour les appels de profil et de fonction. Vous n'avez donc plus besoin de pointer sur ces événements dans la piste Main.

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

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

Problème Chromium : 368541957.

Compatibilité des données de champ "LCP par phase"

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

Avant et après l'ajout de données de champ à l'insight "LCP par phase".

Insight "Arborescence des dépendances réseau"

L'onglet Performances > Insights ajoute le nouvel insight Arborescence des dépendances réseau à sa collection. L'insight vous indique si vous avez créé des chaînes de demandes critiques, ce qui n'est pas recommandé. Pointez sur les requêtes listées dans l'insight pour les voir mises en évidence dans la piste Réseau.

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

Mise en surbrillance de la pile la plus lourde

Le panneau Performances met désormais en évidence les éléments de la piste Principale lorsque vous pointez dessus dans la barre latérale Arborescence des appels ou De bas en haut > Pile la plus lourde, et atténue le reste. Cela vous permet de trouver visuellement les éléments imbriqués de la pile d'appels qui prennent le plus de temps.

Vue de l'arborescence d'accessibilité dans "Éléments"

La vue Arborescence d'accessibilité en pleine page est désormais activée par défaut dans le panneau Éléments.

Auparavant, vous pouviez parcourir un arbre d'accessibilité distinct dans l'onglet Éléments > Accessibilité. Vous pouvez désormais cliquer sur le bouton Passer à l'arborescence d'accessibilité en haut à droite de l'arborescence DOM dans le panneau Éléments pour basculer entre l'arborescence DOM et l'arborescence d'accessibilité de la page entière. Vous pouvez ainsi les explorer plus facilement et comprendre leur relation.

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

L'arborescence d'accessibilité vous permet d'inspecter la façon dont les technologies d'assistance voient votre contenu. Elle affiche les attributs ARIA et les propriétés d'accessibilité calculées des nœuds DOM. Pour en savoir plus, consultez Arborescence d'accessibilité complète dans les outils pour les développeurs Chrome.

Problème Chromium : 40808541.

Amélioration des états vides pour différents panneaux

Les états vides (lorsque rien n'est ouvert) de différents 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 Réseau, comportent désormais des boutons d'aide pertinents, tels que Recharger la page.

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 le déplacement de 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 IA sur crbug.com/364805393.

Lighthouse 12.4.0

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

Dans cette version, certains audits de performances sont marqués comme informatifs dans les conditions de réussite au lieu d'être masqués dans la section des audits réussis. Consultez la liste complète des modifications.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 40543651.

Autres points importants

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

Performances > Récapitulatif : les deux lignes Temps total et Temps propre ont été remplacées 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 met désormais en évidence 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 acceptés et mis en évidence par un trait ondulé (crbug.com/378738916).
Réseau : les icônes de remplacement et d'avertissement concernant les cookies s'affichent désormais à droite du nom de l'onglet, et non plus à gauche (crbug.com/390556283).

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 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.

Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
Signalez un problème dans les outils de développement en cliquant sur Plus d'options > Aide > Signaler un problème dans les outils de développement.
Envoyez un tweet à @ChromeDevTools.
Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils de développement" ou les vidéos YouTube "Conseils sur les outils de développement".