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

L'enregistreur prend en charge 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 compatibilité de Puppeteer avec Firefox, 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 à la fois sur Firefox et Chrome.

Pour en savoir plus, consultez WebDriver BiDi : l'avenir de l'automatisation multinavigateur.

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 temps réel sur les Core Web Vitals, à la fois sur votre ordinateur local et en fonction des données de champ du rapport d'expérience utilisateur Chrome. Vous pouvez ainsi détecter les problèmes de performances sans avoir à capturer des traces de performances et comprendre dans quelle mesure votre expérience est représentative de 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 dans la boîte de dialogue, cliquez sur OK. Pointez sur une valeur de métrique pour afficher une info-bulle contenant plus d'informations.

Le panneau Performances met en évidence les métriques qui peuvent être améliorées, et fournit des insights et des suggestions pour adapter votre expérience locale à 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.

Requêtes de recherche dans le canal "Réseau"

La zone de recherche Search (Rechercher) du panneau Performances fonctionne désormais également dans le canal Network (Réseau). Vous pouvez ainsi rechercher des requêtes à l'aide du raccourci Ctrl / Cmd+F.

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

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

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 de saisie automatique

Le panneau Saisie automatique fournit désormais des données de test pour les formulaires d'adresse. Vous pouvez ainsi 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 des formulaires d'adresse avec des données de test, ouvrez le panneau Saisie automatique, activez la check_box Afficher les adresses de test dans le menu de saisie automatique, effectuez un clic droit sur un formulaire d'adresse renseigné sur votre page, puis sélectionnez l'une des options du menu Outils pour les développeurs.

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> ont des ensembles d'options différents.

Problème Chromium: 40280012.

La saisie semi-automatique de la section "Éléments > Styles" permet désormais de saisir plus de propriétés de grille

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

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

Phare 12.2.0

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

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

Autres points forts

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

• Éléments :
  • Correction d'un bug de 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.
  • Un actualisation de la 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 le réseau ouvre désormais l'onglet En-têtes de la requête réseau pertinente.
• Console :
  • Les erreurs provenant de l'extension C/C++ n'ouvrent plus automatiquement la console 356320158.
  • Correction d'un bug avec 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" d'apparaître 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 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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.