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 un ennuyeux pour les développeurs Web qui utilisent la console pour tester de nouveaux du code source.

Par exemple, lorsqu'elle redéclarait une variable locale avec let, la console générait une exception erreur:

La console permet maintenant la redéclaration:

Problème Chromium n° 1004193

Amélioration du débogage de WebAssembly

Les outils de développement sont désormais compatibles avec la norme de débogage DWARF, ce qui signifie une meilleure compatibilité avec Passer sur le code, définir des points d'arrêt et résoudre les traces de la pile dans vos langages sources Les outils de développement. Pour tout savoir, consultez Débogage WebAssembly amélioré dans les outils pour les développeurs Chrome.

Mises à jour du panneau "Network"

Demander des chaînes de demandeur dans l'onglet Initiateur

Vous pouvez maintenant afficher les initiateurs 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 une certaine ressource (comme comme un script).

Après avoir enregistré l'activité réseau dans le panneau "Network", cliquez sur une ressource, puis accédez à Onglet Initiator (Initiateur) pour afficher la chaîne de demandeurs associés:

• La ressource inspectée est en gras. Dans la capture d'écran ci-dessus, https://web.dev/default-627898b5.js correspond à 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. Dans d'autres "https://web.dev/bootstrap.js" a entraîné la requête réseau https://web.dev/default-627898b5.js
• Les ressources situées sous la ressource inspectée sont les dependencies. Dans la capture d'écran ci-dessus, https://web.dev/chunk-f34f99f7.js est une dépendance de https://web.dev/default-627898b5.js. Dans En d'autres termes, https://web.dev/default-627898b5.js a entraîné la requête réseau https://web.dev/chunk-f34f99f7.js

Problème Chromium n° 842488

Mettez en surbrillance la demande réseau sélectionnée dans "Vue d'ensemble".

Une fois que vous avez cliqué sur une ressource réseau pour l'inspecter, une bordure bleue s'affiche dans le panneau "Network" (Réseau). autour de cette ressource dans la section Présentation. Cela peut vous aider à détecter si la requête réseau est se produisant plus tôt ou plus tard que prévu.

Problème Chromium n° 988253

Colonnes d'URL et de chemin d'accès 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 complet URL 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 n° 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 La chaîne user-agent a une incidence sur l'en-tête HTTP User-Agent associé aux ressources réseau, ainsi que sur 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 aux conditions du réseau, ouvrez le menu de commandes et exécutez Show Network Conditions .

Problème Chromium n° 1029031

Mises à jour du panneau "Audits"

Nouvelle interface utilisateur de configuration

L'interface utilisateur de configuration bénéficie d'un nouveau responsive design et les options de configuration de limitation a été simplifié. Pour en savoir plus sur l'interface utilisateur de limitation, consultez la page Limitation du panneau d'audits. des modifications.

Mises à jour de l'onglet "Couverture"

Modes de couverture par fonction ou par bloc

L'onglet Couverture inclut un nouveau menu déroulant qui vous permet de spécifier si des 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 également beaucoup plus cher à collecter. Les outils de développement utilisent désormais par défaut la couverture par fonction.

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

L'activation ou la désactivation de la couverture de code sans actualisation de la page a été supprimée, car les données de couverture étaient peu fiables. Par exemple, une fonction peut être signalée comme inutilisée si son exécution a eu lieu il y a longtemps. et le récupérateur de mémoire de V8 l'a nettoyé.

Problème Chromium n° 1004203

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement