Nouveautés des outils pour les développeurs Chrome 143

Mises à jour du serveur MCP des outils de développement

Nous avons apporté diverses améliorations au serveur MCP des outils de développement et publié la version 0.11.0.

  • Lorsque vous effectuez une requête dans votre client MCP (Gemini CLI, Cursor, etc.), vous pouvez désormais faire référence aux éléments et aux requêtes réseau sélectionnés dans les panneaux "Éléments" et "Réseau".
  • L'outil list_console_messages inclut désormais également les problèmes signalés dans le panneau Problèmes.
  • Le nouvel outil press_key peut désormais être utilisé pour déboguer les événements clavier qui ne sont pas liés aux éléments de formulaire.
  • Les instantanés de l'arborescence d'accessibilité peuvent désormais être enregistrés sur le disque
  • Les pages peuvent désormais être actualisées, avec la possibilité d'ignorer le cache
  • Configurer l'indicateur --user-data-dir pour utiliser un profil Chrome existant

Consultez le journal des modifications public sur GitHub pour obtenir la liste complète des modifications et des corrections de bugs, et en savoir plus sur le serveur MCP DevTools dans l'article de blog d'annonce.

Amélioration du partage des traces

Boîte de dialogue de partage des traces dans le panneau "Performances"

Lorsque vous exportez une trace de performances, vous pouvez désormais inclure des données supplémentaires dans le fichier exporté pour faciliter le débogage ultérieur pour vous-même ou un collègue. Vous pouvez désormais choisir d'inclure les éléments suivants :

  • Contenu des ressources : copie de tous les fichiers HTML, CSS et JavaScript (à l'exception des scripts d'extension)
  • Cartes sources de script : mappages vers le code créé, qui vous permettent de voir les noms de fonctions et les fichiers sources d'origine.

Découvrez ce que vous pouvez partager et ce que vous devez garder privé dans notre documentation mise à jour.

Nous tenons à remercier nos collègues de Microsoft, avec qui nous avons collaboré pour y parvenir et qui ont mené les premiers travaux.

Prise en charge de @starting-style

Le panneau Éléments est désormais compatible avec le débogage de la nouvelle règle CSS @starting-style, qui est essentielle pour créer des animations d'entrée.

Vous pouvez désormais voir un ornement starting-style dans l'arborescence Éléments à côté des éléments concernés, activer/désactiver l'état starting-style de l'élément en cliquant sur la capsule, et inspecter et déboguer le bloc @starting-style dans l'onglet Styles.

Widget d'éditeur pour l'affichage : maçonnerie

Si vous testez la mise en page CSS Masonry, vous pouvez désormais utiliser le même widget d'éditeur que celui que vous connaissez dans display : les mises en page flex et grid pour basculer rapidement entre les différentes options d'alignement dans les mises en page masonry.

Lighthouse 13

Le panneau Lighthouse exécute désormais Lighthouse 13. Cette étape marque la fin du travail d'unification des insights sur les performances dans les outils de développement et Lighthouse.

Pour en savoir plus, consultez l'article de blog annonçant cette nouveauté. Pour découvrir à quoi sert Lighthouse et comment il se connecte au panneau "Performances" des outils de développement, consultez Lighthouse : optimiser votre site Web.

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.