Nouveautés des outils de développement (Chrome 80)

Kayce Basques
Kayce Basques
X GitHub

Compatibilité des redéclarations let et class dans la console

La console est désormais compatible avec les redéclarations des instructions let et class. L'impossibilité de redéclarer était une source d'irritation fréquente pour les développeurs Web qui utilisent la console pour tester de nouveaux codes JavaScript.

Par exemple, auparavant, lorsque vous redéclariez une variable locale avec let, la console générait une erreur :

Capture d'écran de la console dans Chrome 78 montrant que la redéclaration de let échoue.

Désormais, la console autorise la redéclaration :

Capture d'écran de la console dans Chrome 80 montrant que la redéclaration "let" réussit.

Problème Chromium #1004193

Débogage WebAssembly amélioré

Les outils de développement sont désormais compatibles avec la norme de débogage DWARF. Vous pouvez donc parcourir le code, définir des points d'arrêt et résoudre les traces de pile dans vos langages sources dans les outils de développement. Pour en savoir plus, consultez Amélioration du débogage WebAssembly dans Chrome DevTools.

Capture d'écran du nouveau débogage WebAssembly optimisé par DWARF.

Mises à jour du panneau "Réseau"

Chaînes de l'initiateur de requête dans l'onglet "Initiateur"

Vous pouvez désormais afficher les initiateurs et les dépendances d'une requête réseau sous forme de liste imbriquée. Cela peut vous aider à comprendre pourquoi une ressource a été demandée ou quelle activité réseau une certaine ressource (telle qu'un script) a provoquée.

Capture d'écran d'une chaîne d'initiateur de requête dans l'onglet "Initiateur"

Après avoir enregistré l'activité réseau dans le panneau "Réseau", cliquez sur une ressource, puis accédez à l'onglet Initiateur pour afficher sa chaîne d'initiation de la requête :

  • La ressource inspectée est en gras. Dans la capture d'écran ci-dessus, https://web.dev/default-627898b5.js est la ressource inspectée.
  • Les ressources situées au-dessus de la ressource inspectée sont les initiateurs. Dans la capture d'écran ci-dessus, https://web.dev/bootstrap.js est l'initiateur de https://web.dev/default-627898b5.js. En d'autres termes, https://web.dev/bootstrap.js a provoqué la requête réseau pour https://web.dev/default-627898b5.js.
  • Les ressources situées sous la ressource inspectée sont les dépendances. Dans la capture d'écran ci-dessus, https://web.dev/chunk-f34f99f7.js est une dépendance de https://web.dev/default-627898b5.js. En d'autres termes, https://web.dev/default-627898b5.js a déclenché la requête réseau pour https://web.dev/chunk-f34f99f7.js.

Problème Chromium #842488

Mettre en surbrillance la requête réseau sélectionnée dans l'onglet "Aperçu"

Lorsque vous cliquez sur une ressource réseau pour l'inspecter, le panneau "Réseau" entoure désormais cette ressource d'une bordure bleue dans l'onglet Aperçu. Cela peut vous aider à détecter si la requête réseau se produit plus tôt ou plus tard que prévu.

Capture d'écran du volet "Vue d'ensemble" mettant en évidence la ressource inspectée.

Problème Chromium #988253

Colonnes "URL" et "Chemin" dans le panneau "Réseau"

Utilisez les nouvelles colonnes Chemin d'accès et URL du panneau Réseau pour afficher le chemin d'accès absolu ou l'URL complète de chaque ressource réseau.

Capture d'écran des nouvelles colonnes "Chemin d'accès" et "URL" dans le panneau "Réseau".

Effectuez un clic droit sur l'en-tête du tableau Cascade, puis sélectionnez Chemin d'accès ou URL pour afficher les nouvelles colonnes.

Problème Chromium #993366

Chaînes user-agent mises à jour

Les outils pour les développeurs permettent de définir une chaîne User-Agent personnalisée dans l'onglet Conditions du réseau. La chaîne user-agent affecte l'en-tête HTTP User-Agent associé aux ressources réseau, ainsi que la valeur de navigator.userAgent.

Les chaînes user-agent prédéfinies ont été mises à jour pour refléter les versions modernes des navigateurs.

Capture d'écran du menu "User-Agent" dans l'onglet "Conditions du réseau".

Pour accéder à Network Conditions (Conditions du réseau), ouvrez le menu de commandes et exécutez la commande Show Network Conditions.

Problème Chromium #1029031

Modifications du panneau "Audits"

Nouvelle UI de configuration

L'interface utilisateur de configuration présente une nouvelle conception responsive, et les options de configuration de la limitation ont été simplifiées. Pour en savoir plus sur les modifications apportées à l'UI de limitation, consultez Limitation du panneau "Audits".

Nouvelle UI de configuration.

Modifications apportées à l'onglet "Couverture"

Modes de couverture par fonction ou par bloc

L'onglet "Couverture" comporte un nouveau menu déroulant qui vous permet de spécifier si les données de couverture du code doivent être collectées par fonction ou par bloc. La couverture par bloc est plus détaillée, mais aussi beaucoup plus coûteuse à collecter. Les outils de développement utilisent désormais la couverture par fonction par défaut.

Menu déroulant du mode de couverture.

La couverture doit désormais être lancée par une actualisation de la page

La possibilité d'activer/désactiver la couverture du code sans recharger la page a été supprimée, car les données de couverture n'étaient pas fiables. Par exemple, une fonction peut être signalée comme inutilisée si son exécution remonte à longtemps et que le garbage collector de V8 l'a nettoyée.

Problème Chromium #1004203

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.