Amélioration de l'expérience de débogage dans les outils pour les développeurs Chrome grâce à l'extension de carte source ignoreList.
Les outils pour les développeurs Chrome analysent le champ ignoreList dans les mappages sources afin d'améliorer l'expérience de débogage pour les développeurs. Examinez la trace de la pile suivante dans la console. Les outils de développement masquent automatiquement tous les cadres tiers et n'affichent que ceux qui correspondent à votre code.
<ph type="x-smartling-placeholder">ignoreList par les outils pour les développeurs Chrome. Plus tard, les cadres tiers non pertinents seront masqués pour vous aider à identifier les problèmes plus rapidement lors du débogage.
Qu'est-ce que ignoreList ?
Les extensions de mappage source sont des champs supplémentaires qui stockent des informations complémentaires concernant le mappage source. Ces champs sont précédés du préfixe x_.
Les outils pour les développeurs Chrome utilisent le champ ignoreList (s'il est fourni) pour filtrer le code généré et permettre aux développeurs Web de se concentrer uniquement sur le code qu'ils créent. Examinons par exemple la carte source suivante.
/* demo.js.map */
{
"version": 3,
"mappings": "AAAAA, ..."
"sources": [
"app.js",
"components/Button.ts",
"node_modules/.../framework.js",
"node_modules/.../library.js",
...
],
"ignoreList": [2, 3],
...
}
Le champ sources affiche une liste des sources d'origine utilisées par l'entrée mappings. Regardez la vidéo Que sont les mappages sources ? pour découvrir comment fonctionnent les mappages.
Étant donné que les deux fichiers node_modules/…/frameworks.js et node_modules/.../library.js sont des scripts tiers, vous pouvez spécifier le champ ignoreList pour indiquer leurs positions dans le champ sources. Les outils pour les développeurs Chrome appliqueront ces informations pour masquer les cadres dans ces fichiers ignorés.
<ph type="x-smartling-placeholder">Cela s'applique également à la pile d'appels dans le panneau Sources lors du débogage des points d'arrêt.
En arrière-plan, les outils de développement disposent d'un paramètre supplémentaire activé par défaut: Ajouter automatiquement les scripts tiers connus à la liste des éléments à ignorer. Vous le trouverez dans Outils de développement > Paramètres > Liste d'éléments à ignorer.
Avec le champ de carte source ignoreList, vous avez la possibilité de masquer les fichiers ignorés dans le panneau Sources pour vous concentrer sur votre code.
Remplir ignoreList
La bonne nouvelle, c'est que des frameworks comme Angular et Nuxt configurent déjà ignoreList dans leurs cartes sources. Passez à la dernière version : tout est prêt à l'emploi. Vous pouvez facilement améliorer les traces de la pile.
D'autre part, les outils de compilation tels que Vite et Rollup fournissent des paramètres pour le configurer. Il existe également un plug-in webpack pour cela.
Si vous gérez un framework ou une bibliothèque, il est essentiel de comprendre comment implémenter ces paramètres afin d'améliorer l'expérience de débogage de vos utilisateurs. Consultez la section suivante pour découvrir comment Angular et Nuxt ont procédé en arrière-plan.
Que faire si votre framework et votre outil de compilation préférés ne sont pas encore compatibles ?
Nous travaillons activement avec des frameworks et développons des outils pour mettre en œuvre ces nouveaux paramètres. Vous pouvez également nous aider en avertissant les responsables de cette fonctionnalité. Par exemple, vous pouvez signaler un problème dans leur dépôt.
Vous pouvez également ajouter manuellement les scripts non pertinents à la liste des éléments à ignorer directement depuis l'arborescence de fichiers dans les Outils de développement > Sources > Volet Page pour obtenir un résultat similaire.
Études de cas: Implémentation de Nuxt et Angular
Examinez les deux études de cas suivantes.
ignoreList à Nuxt
À partir de la version 3.3.1 de Nuxt, le contenu des fichiers node_modules et buildDir Nuxt a été marqué comme "à ignorer par les débogueurs".
Pour ce faire, nous avons modifié la configuration de compilation de Nuxt à l'aide de Vite et de Rollup:
/* vite.config.ts */
const ctx: ViteBuildContext = {
config: vite.mergeConfig(
build: {
rollupOptions: {
output: {
sourcemapIgnoreList: (relativeSourcePath) => {
return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
},
}
})
L'équipe DevTools tient à remercier les équipes Vite et Nuxt d'avoir rendu cela possible. Nous apprécions vos efforts et votre collaboration, qui ont été essentiels à la réussite de cette mise en œuvre. Merci encore aux équipes Vite et Nuxt pour vos contributions.
ignoreList dans Angular
À partir d'Angular v14.1.0, le contenu des dossiers node_modules et webpack a été marqué comme à ignorer.
Pour ce faire, une modification de angular-cli a été réalisée, en créant un plug-in qui se connecte au module Compiler du webpack.
Le plug-in webpack que nos ingénieurs ont créé des hooks dans l'étape PROCESS_ASSETS_STAGE_DEV_TOOLING et remplit le champ ignoreList des mappages sources avec les éléments finaux générés par Webpack et le navigateur chargé.
const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];
for (const [index, path] of map.sources.entries()) {
if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
ignoreList.push(index);
}
}
map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
Pour en savoir plus sur les autres améliorations du débogage Angular apportées aux outils de développement, consultez Étude de cas: Améliorer le débogage Angular avec les outils de développement.
L'équipe des outils pour les développeurs Chrome tient à remercier l'équipe d'Angular pour ses contributions précieuses à la réussite de cette implémentation. Vos efforts et votre collaboration ont été essentiels, et nous apprécions votre travail. Merci à l'équipe Angular d'avoir rendu tout cela possible.