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

Sofia Emelianova
Sofia Emelianova

L'enregistreur est compatible avec l'exportation vers Puppeteer pour Firefox

Grâce à la prise en charge de WebDriver BiDi, le panneau Enregistreur peut désormais exporter des enregistrements vers Puppeteer pour Firefox. Grâce à la prise en charge de Firefox par Puppeteer, vous pouvez désormais enregistrer des parcours utilisateur à l'aide du panneau Enregistreur des outils pour les développeurs Chrome, les exporter et les exécuter sur Firefox et Chrome.

Avant et après l'ajout de l'option "Puppeteer for Firefox" au menu d'exportation de l'enregistreur.

Pour en savoir plus, consultez WebDriver BiDi : l'avenir de l'automatisation cross-browser.

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Observations sur les métriques en direct

Le panneau Performances affiche désormais des observations en direct sur les Core Web Vitals, à la fois sur votre machine locale et en fonction des données de champ du rapport sur l'expérience utilisateur Chrome. Cela vous permet de détecter les problèmes de performances sans avoir à capturer de traces de performances et de comprendre à quel point votre expérience est représentative par rapport à celle de vos utilisateurs.

Pour afficher les observations en direct sur le LCP et le CLS, ouvrez le panneau Performances. Pour afficher l'INP, effectuez une interaction sur une page. Pour comparer vos métriques locales à l'expérience utilisateur agrégée du rapport UX Chrome, ajoutez des données de champ : dans la section Données de champ à droite, cliquez sur Configurer, puis sur OK dans la boîte de dialogue. Pointez sur la valeur d'une métrique pour afficher une info-bulle contenant plus d'informations.

Observations en direct sur les métriques du panneau "Performances".

Le panneau Performances met en évidence les métriques qui peuvent être améliorées et fournit des insights et des suggestions sur la façon d'aligner votre expérience locale sur celle de vos utilisateurs. Par exemple, vous pouvez limiter le processeur ou le réseau. Pour ce faire, accédez à la section Paramètres d'enregistrement à droite de l'écran.

La zone de recherche du panneau Performances fonctionne désormais également sur la piste Réseau. Vous pouvez ainsi trouver des requêtes à l'aide du raccourci Ctrl / Cmd+F.

Requête réseau trouvée avec la recherche.

Afficher les traces de pile des appels performance.mark et performance.measure

Dans l'onglet Résumé, le panneau Performances affiche désormais les traces de pile des appels performance.mark et performance.measure. Vous pouvez utiliser ces appels pour étendre la trace de performances avec vos données personnalisées.

Avant et après l'affichage des traces de pile pour les appels performance.mark et performance. measure.

Pour en savoir plus, consultez Personnaliser vos données de performances avec l'API d'extensibilité.

Utiliser des données d'adresse de test dans le panneau "Saisie automatique"

Le panneau Saisie automatique fournit désormais des données de test pour les formulaires d'adresse. Cela vous permet de tester plus facilement les formulaires d'adresse sur votre site Web lorsque vous n'avez aucune adresse enregistrée dans Chrome ou que vous utilisez un profil invité.

Pour remplir automatiquement les formulaires d'adresse avec des données de test, ouvrez le panneau Saisie automatique, cochez Afficher les adresses de test dans le menu de saisie automatique, effectuez un clic droit sur un formulaire d'adresse rempli sur votre page, puis sélectionnez l'une des options du menu Outils pour les développeurs.

Options "Avant" et "Après" l'ajout de données de test de saisie automatique dans le menu déroulant d'un champ de formulaire d'adresse.

Améliorations apportées au panneau "Elements"

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

Forcer plus d'états pour des éléments spécifiques

La section :hov de Éléments > Styles vous propose désormais davantage de pseudo-classes que vous pouvez activer de force. Le nouvel ensemble d'options se trouve dans le menu déroulant de l'état Forcer un élément spécifique et est spécifique à certains éléments que vous sélectionnez. Par exemple, <label> et <input> proposent des ensembles d'options différents.

Avant et après l&#39;ajout de la possibilité de forcer des états d&#39;éléments spécifiques.

Problème Chromium : 40280012.

La saisie semi-automatique de plus de propriétés de grille est désormais disponible dans Éléments > Styles.

L'onglet Éléments > Styles propose désormais des options de saisie semi-automatique lorsque vous modifiez les noms de zones et de lignes de la grille.

Options d&#39;avant et après l&#39;ajout de la saisie semi-automatique lorsque vous modifiez les noms des lignes de la grille.

Pour en savoir plus, consultez Inspecter les mises en page en grille CSS et, en particulier, la section Afficher les noms de lignes.

Lighthouse 12.2.0

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

Cette mise à jour apporte un certain nombre de corrections de bugs. 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 : 772558.

Autres points importants

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

  • Éléments :
    • Correction d'un bug lié au rendu incorrect des propriétés de longueur surchargées 357020613.
    • position-try-options a été renommé position-try-fallbacks conformément à la spécification.
    • L'actualisation d'une page restaure désormais le nœud sélectionné, même dans un iFrame 40719145.
    • Accessibilité : les lecteurs d'écran annoncent désormais le bouton Afficher l'élément 357382536.
  • Performances > Réseau : l'option de menu Afficher dans Réseau ouvre désormais l'onglet En-têtes de la requête réseau concernée.
  • Console :
    • Les erreurs de l'extension C/C++ n'ouvrent plus de force la console 356320158.
    • Correction d'un bug lié à import.meta dans un module JS qui n'était pas évalué lorsqu'il était mis en pause 40743793.
  • Mémoire : correction d'un bug qui empêchait l'option "Restaurer les éléments de conservation ignorés" de s'afficher après l'ignorance d'un élément de conservation 327337527.

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.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés des outils pour les développeurs.