Cette page a été traduite par l'API Cloud Translation.

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

Kayce Basques

Prise en charge des redéclarations `let` et `class` dans la console.

La console prend désormais en charge les redéclarations des instructions let et class. L'impossibilité de redéclarer était souvent ennuyeuse pour les développeurs Web qui utilisent la console pour tester un nouveau code JavaScript.

Avertissement:Le fait de redéclarer une instruction let ou class dans un script en dehors de la console ou dans une seule entrée de la console entraîne toujours une erreur SyntaxError.

Par exemple, précédemment, lorsque vous redéclariez une variable locale avec let, la console générait l'erreur suivante:

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

À présent, la console autorise la redéclaration:

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

Problème Chromium n° 1004193

Amélioration du débogage WebAssembly

Les outils de développement sont désormais compatibles avec la norme de débogage DWARF, ce qui signifie une meilleure prise en charge du défilement du code, de la définition des points d'arrêt et de la résolution des traces de pile dans vos langages sources dans les outils de développement. Pour en savoir plus, consultez Débogage WebAssembly amélioré dans les outils pour les développeurs Chrome.

Capture d'écran du nouveau débogage WebAssembly basé sur DWARF.

Mises à jour du panneau "Network"

Demander des chaînes d'initiateurs dans l'onglet Initiateur

Vous pouvez désormais afficher les innovateurs et les dépendances d'une requête réseau sous la forme d'une liste imbriquée. Cela peut vous aider à comprendre pourquoi une ressource a été demandée ou quelle activité réseau a provoquée une ressource donnée (un script, par exemple).

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

Après avoir journalisé l'activité réseau dans le panneau "Network" (Réseau), cliquez sur une ressource, puis accédez à l'onglet Initiator (Initiateur) pour afficher la chaîne d'initiateurs de requête correspondante:

La ressource inspectée apparaît 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 est à l'origine de la requête réseau de 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 la vue d'ensemble

Une fois que vous avez cliqué sur une ressource réseau pour l'inspecter, le panneau "Réseau" place une bordure bleue autour de cette ressource dans la section Présentation. 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 "Overview" (Aperçu) mettant en évidence la ressource inspectée

Problème Chromium #988253

Colonnes d'URL et de chemin d'accès dans le panneau "Network"

Utilisez les nouvelles colonnes Chemin et URL du panneau Network pour afficher le chemin 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"

Faites un clic droit sur l'en-tête du tableau Waterfall (Cascades d'annonces) et sélectionnez Path (Chemin) ou URL (URL) pour afficher les nouvelles colonnes.

Problème Chromium #993366

Chaînes user-agent mises à jour

Les outils de développement permettent de définir une chaîne user-agent personnalisée via 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 récentes des navigateurs.

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

Pour accéder aux conditions de réseau, ouvrez le menu de commandes et exécutez la commande Show Network Conditions.

Problème Chromium n° 1029031

Mises à jour du panneau "Audits"

Nouvelle interface utilisateur de configuration

L'interface utilisateur de configuration dispose d'un nouveau responsive design, et les options de configuration de limitation ont été simplifiées. Consultez Limitation du panneau "Audits" pour en savoir plus sur les modifications apportées à la limitation de l'interface utilisateur.

Nouvelle interface utilisateur de configuration.

Mises à jour de 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 de code doivent être collectées par fonction ou par bloc. La couverture par bloc est plus détaillée, mais beaucoup plus coûteuse à collecter. Désormais, les outils de développement utilisent 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

L'activation/la désactivation de la couverture du code sans actualiser 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 non utilisée si son exécution a eu lieu il y a longtemps et que le récupérateur de mémoire de V8 l'a nettoyée.

Problème Chromium n° 1004203

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.