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

Sofia Emelianova
Sofia Emelianova
GitHub

Historique des discussions avec l'IA persistant

Le panneau Assistance IA conserve désormais votre historique de chat en local pour toutes les sessions. Vous pouvez ainsi consulter vos conversations précédentes avec Gemini même après avoir rechargé les outils de développement ou Chrome.

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Insight sur la diffusion d'images

L'onglet Performances > Insights peut désormais mettre en évidence les images dont vous pouvez optimiser la taille du fichier. Cliquez sur une image dans l'insight pour la mettre en surbrillance dans la piste Réseau.

Panneau "Performances" avec l'insight sur la diffusion d'images mis en évidence.

Pour savoir comment optimiser la diffusion d'images, consultez Encoder efficacement des images.

Navigation au clavier classique et moderne

Le panneau Performances vous permet désormais de choisir votre style de navigation au clavier préféré, avec les principales différences suivantes :

  • Classique : zoomez avec la molette de la souris (ou en faisant glisser le doigt vers le haut ou vers le bas sur le pavé tactile) et faites défiler l'écran verticalement avec Maj+molette de la souris.
  • Moderne : défilement vertical avec la molette de la souris, défilement horizontal avec Maj+molette de la souris et zoom avec Cmd/Ctrl+molette de la souris.

Pour choisir votre style préféré, en haut à droite du panneau, cliquez sur Afficher les raccourcis, puis sélectionnez Classique ou Moderne. La boîte de dialogue des raccourcis vous fournit également une antisèche des raccourcis disponibles.

Boîte de dialogue des raccourcis affichant les raccourcis disponibles pour le panneau "Performances".

Ignorer les scripts non pertinents dans le graphique en flammes

Pour mieux vous concentrer sur votre code, vous pouvez désormais ajouter des scripts non pertinents à la liste des éléments à ignorer directement dans le panneau Performances. Le panneau réduit automatiquement l'imbrication excessive.

Pour ajouter des scripts à la liste des éléments à ignorer, cliquez sur Afficher la boîte de dialogue du paramètre de la liste des éléments à ignorer dans la barre d'action supérieure, puis saisissez une expression régulière dans le champ de saisie. Le graphique en flammes appliquera la nouvelle règle au fur et à mesure que vous la saisirez.

Les outils de développement enregistrent les règles de la liste d'exclusion que vous ajoutez dans Paramètres > Liste d'exclusion. Vous pouvez les activer et les désactiver à votre guise dans la boîte de dialogue.

Repère de la timeline et mise en surbrillance de la plage au pointage

Pour vous aider à mieux comprendre la trace de performances, le panneau Performances effectue désormais les opérations suivantes :

  • Affiche un repère vertical qui s'étend sur l'ensemble de la trace de performances lorsque vous pointez sur Timeline.
  • Met en surbrillance une plage dans la timeline lorsque vous pointez sur des éléments de la piste Principale.

Paramètres de limitation recommandés

Le panneau Performances recommande désormais des paramètres de limitation à la fois dans les métriques en direct et dans les menus déroulants  > Paramètres de capture.

Avant et après l'ajout de recommandations de limitation aux menus de paramètres.

La limitation du processeur recommandée est (pour l'instant) la plus fréquemment utilisée 4x slowdown, et la recommandation réseau est basée sur les données du Chrome UX Report, si l'option Activer dans les métriques en direct est activée.

De plus, le panneau Performances vous rappelle désormais les paramètres de limitation que vous avez utilisés à côté de chaque trace dans le menu déroulant Sessions récentes de la barre d'actions.

Repères temporels dans une superposition

Les repères de timing ont été déplacés de la piste Timings vers le bas de la trace. Ils sont désormais superposés à toutes les pistes et sont visibles même si la piste Timings est masquée.

Avant et après le déplacement des repères en bas de la trace.

La piste Timings conserve vos appels mark() et measure() personnalisés.

Traces de pile des appels JavaScript dans le récapitulatif

L'onglet Performances > Récapitulatif affiche désormais les traces de pile des appels JavaScript, y compris ceux qui sont asynchrones.

Avant et après l'ajout de traces de pile à l'onglet "Synthèse".

Les paramètres des badges ont été déplacés vers le menu d'Elements

Les paramètres des badges du panneau Éléments ont été déplacés d'une barre d'actions masquée par défaut vers le menu contextuel correspondant.

Avant et après le déplacement des paramètres des badges dans le menu.

Nouveau panneau "Nouveautés"

Le panneau Nouveautés adopte un nouveau look plus proche de celui de Chrome.

Ancien et nouveau look du panneau "Nouveautés".

Problème Chromium : 325441858.

Lighthouse 12.3.0

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

Cette mise à jour ajoute, entre autres, de nouveaux audits qui vérifient l'isolation appropriée de l'origine avec COOP et une règle HSTS efficace. Consultez la liste complète des modifications.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, 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 :

  • Sources : lorsque la mise en pause est activée, le débogueur ne bascule plus de manière inattendue vers le contexte du service worker s'il est créé après la mise en pause (373893057).
  • Performances :
    • Lorsque vous pointez sur des scripts, les info-bulles du graphique en flammes affichent désormais les URL, le cas échéant (368541957).
    • Récapitulatif : le graphique à secteurs est remplacé par une représentation sous forme de barre.
    • La case à cocher Données d'extension dans Paramètres de capture est renommée Afficher les pistes personnalisées.
    • L'onglet Insights comporte désormais une section Insights réussis (N), qui est réduite par défaut.
  • Application > Stockage : vous pouvez créer des entrées de stockage avec des clés vides, car elles sont techniquement valides (373703285).
  • Le mode Appareil est désormais désactivé pour les pages chrome:// (40186276).
  • Réseau :
    • Lorsque le paramètre correspondant est activé, un seul clic sur Exporter au format HAR ouvre un menu avec deux options (nettoyé et avec données sensibles). Auparavant, le menu s'ouvrait avec un appui long (378076279).
    • L'option Copier en tant que cURL utilise désormais l'attribut -b pour contourner les cookies et être plus lisible, au lieu de -H 'cookie:...' (40791742).
  • Accessibilité : vous pouvez désormais déplacer des onglets vers la gauche ou vers la droite à l'intérieur des panneaux à l'aide d'un menu contextuel (383164782).
  • Blocage de requête réseau : le paramètre de ce menu de commandes est désormais synchronisé avec la case à cocher correspondante (378058733).

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.