Améliorez l'expérience de débogage dans les outils pour les développeurs Chrome grâce à l'extension de mappage source ignoreList.
Les outils pour les développeurs Chrome analysent le champ ignoreList dans les sourcemaps pour améliorer l'expérience de débogage des développeurs. Examinez la trace de la pile suivante dans la console. Les outils de développement masquent automatiquement tous les frames tiers et n'affichent que ceux qui sont pertinents pour votre code.
ignoreList par les outils pour les développeurs Chrome. Cette dernière option masque les frames tiers non pertinents pour vous aider à identifier plus rapidement les problèmes lors du débogage.
Qu'est-ce que ignoreList ?
Les extensions de mappages sources sont des champs supplémentaires qui stockent des informations complémentaires sur 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 écrivent. Par exemple, examinez le mappage source suivant.
/* 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 la liste des sources d'origine utilisées par l'entrée mappings. Regardez What are source maps? (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 leur position dans le champ sources. Les outils pour les développeurs Chrome utiliseront ces informations pour masquer les frames de ces fichiers ignorés.
Cela s'applique également à la pile d'appel du 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 des scripts tiers connus à une liste d'éléments à ignorer. Vous la trouverez dans DevTools > Paramètres > Liste des éléments à ignorer.
Le champ de mappage de sources ignoreList vous permet de masquer les fichiers ignorés dans le panneau Sources pour vous concentrer sur votre code.
Comment renseigner ignoreList
La bonne nouvelle, c'est que des frameworks comme Angular et Nuxt configurent déjà ignoreList dans leurs mappages sources. Passez à la dernière version pour que tout fonctionne immédiatement. Vous bénéficiez d'améliorations de la trace de la pile sans effort.
En revanche, les outils de compilation tels que Vite et Rollup fournissent des paramètres pour le configurer. Il existe également un plug-in webpack à cet effet.
Si vous êtes un responsable de framework ou de bibliothèque, il est essentiel de comprendre comment implémenter ces paramètres pour 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 coulisses.
Que faire si votre framework et votre outil de compilation préférés ne sont pas encore compatibles ?
Nous collaborons activement avec les frameworks et les outils de compilation pour intégrer ces nouveaux paramètres. Vous pouvez également aider en informant les responsables de cette fonctionnalité. Par exemple, vous pouvez signaler un problème dans leur dépôt.
Vous pouvez également ajouter manuellement des scripts non pertinents à la liste des éléments à ignorer directement depuis l'arborescence de fichiers dans le volet DevTools > Sources > Page pour obtenir un résultat similaire.
Études de cas : implémentation de Nuxt et Angular
Examinez les deux études de cas suivantes.
ignoreList dans Nuxt
À partir de Nuxt v3.3.1, le contenu de node_modules et de Nuxt buildDir 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 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 vous remercions pour vos efforts et votre collaboration, qui ont été essentiels à la réussite de cette implémentation. Merci encore aux équipes Vite et Nuxt pour leurs 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, nous avons modifié angular-cli en créant un plug-in qui se connecte au module Compiler de webpack.
Le plug-in webpack créé par nos ingénieurs s'intègre à 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 chargés par le navigateur.
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 apportées au débogage Angular dans les outils de développement, consultez Étude de cas : Amélioration du débogage Angular avec les outils de développement.
L'équipe des outils pour les développeurs Chrome tient à remercier l'équipe Angular pour sa contribution inestimable à la réussite de cette implémentation. Vos efforts et votre collaboration ont été essentiels, et nous vous remercions pour votre travail acharné. Merci à l'équipe Angular d'avoir rendu cela possible !