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

Kayce Basques

Compatibilité avec les 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 :

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

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. Cela signifie qu'ils offrent une meilleure prise en charge du pas à pas dans le code, de la définition de points d'arrêt et de la résolution des traces de pile dans vos langages sources. Pour en savoir plus, consultez Amélioration du débogage WebAssembly dans Chrome DevTools.

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 (comme un script) a provoquée.

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 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 déclenché 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 provoqué 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 "Overview" (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.

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.

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.

Pour accéder à 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'UI de configuration présente une nouvelle conception responsive, et les options de configuration de la limitation du débit ont été simplifiées. Pour en savoir plus sur les modifications apportées à l'UI de limitation, consultez Limitation du panneau "Audits".

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.

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

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les 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.