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

Sofia Emelianova
Sofia Emelianova
GitHub

Historique des discussions persistant basé sur l'IA

Le panneau Assistance IA conserve désormais localement l'historique de vos discussions entre les sessions. Vous pouvez ainsi consulter vos conversations précédentes avec Gemini même après avoir actualisé les outils pour les développeurs 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 de fichier. Cliquez sur une image dans l'insight pour la mettre en surbrillance dans le canal Réseau.

Panneau "Performances" avec l'insight sur la diffusion des images en surbrillance

Pour en savoir plus sur l'optimisation de la diffusion d'images, consultez Encoder efficacement des images.

Navigation classique et moderne au clavier

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

  • Classique: faites un zoom avec la molette de la souris (pavé tactile vers le haut ou vers le bas) 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 le style de votre choix, 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 aide-mémoire des raccourcis disponibles.

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

Ignorer les scripts non pertinents dans le graphique en forme de flamme

Pour mieux vous concentrer sur votre code, vous pouvez désormais ajouter des scripts non pertinents à la liste d'ignorer directement dans le panneau Performances. Le panneau réduira automatiquement les imbrications excessives.

Pour ajouter des scripts à la liste des éléments à ignorer, cliquez sur Afficher la boîte de dialogue des paramètres 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 forme de flamme appliquera la nouvelle règle au fur et à mesure que vous taperez du texte.

DevTools enregistre les règles de la liste d'ignorement que vous ajoutez dans Paramètres > Liste d'ignorement. Vous pouvez les activer et les désactiver dans la boîte de dialogue à volonté.

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

Pour vous aider à mieux comprendre la trace des performances, le panneau Performances permet désormais de procéder aux opérations suivantes:

  • Affiche un repère vertical qui s'étend sur l'ensemble de la trace des performances lorsque vous pointez sur la chronologie.
  • Met en surbrillance une plage dans la chronologie 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 appropriés.

État avant et après l'ajout des recommandations de limitation dans les menus de paramètres.

Le 4x slowdown recommandé pour le contrôle de la consommation du processeur est (pour le moment) le plus utilisé, et la recommandation de réseau est basée sur les données du rapport sur l'expérience utilisateur Chrome, si celui-ci est activé dans les métriques en temps réel.

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

Repères temporels dans une superposition

Les repères temporels 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 "Résumé"

L'onglet Performances > Récapitulatif affiche désormais des traces de pile des appels JavaScript, y compris les appels 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 dans Elements

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

Avant et après le transfert des paramètres des badges vers le menu.

Nouveau panneau "Nouveautés"

Le panneau Nouveautés a été repensé pour suivre plus fidèlement la conception 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 principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 40543651.

Autres points forts

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

  • Sources: lorsqu'il est mis en pause, le débogueur ne passe plus de manière inattendue au contexte du service worker s'il est créé après la pause (373893057).
  • Performances :
    • Lorsque vous pointez sur des scripts, les info-bulles du graphique en forme de flamme affichent désormais les URL, le cas échéant (368541957).
    • Résumé: Le graphique à secteurs est remplacé par une représentation en barres.
    • La case à cocher Données d'extension dans Paramètres de capture a été rebaptisée Afficher les pistes personnalisées.
    • L'onglet Insights comporte désormais une section Insights acceptés (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 menu s'ouvre lorsque vous cliquez sur Exporter le fichier HAR. Il contient deux options (nettoyé et avec des données sensibles). Auparavant, le menu s'ouvrait avec un appui prolongé (378076279).
    • 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 les onglets dans les panneaux vers la gauche ou la droite à l'aide d'un menu contextuel (383164782).
  • Blocage des requêtes réseau: ce paramètre du menu de commande 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 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.

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.