Améliorez 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 cartes sources afin d'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 cadres tiers et n'affichent que ceux qui sont pertinents pour votre code.
ignoreList. Elle masque les cadres tiers non pertinents pour vous aider à identifier les problèmes plus rapidement lors du débogage.
Qu'est-ce que ignoreList ?
Les extensions de cartes sources sont des champs supplémentaires qui stockent des informations complémentaires sur la carte source. Ces champs sont précédés de 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. Par exemple, examinez 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 la liste des sources d'origine utilisées par l'entrée mappings. Regardez la vidéo Que sont les cartes 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 utiliseront ces informations pour masquer les cadres des 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, un paramètre supplémentaire est activé par défaut dans les outils de développement: Ajouter automatiquement des scripts tiers connus à la liste des éléments à ignorer. Vous pouvez y accéder dans les Outils de développement > Paramètres > Liste d'éléments à ignorer.
Avec le champ de carte source ignoreList, vous pouvez masquer les fichiers ignorés dans le panneau Sources pour vous concentrer sur votre code.
Insérer les valeurs dans ignoreList
La bonne nouvelle, c'est que des frameworks comme Angular et Nuxt configurent déjà ignoreList dans leurs mappages sources. Installez la dernière version pour qu'elle soit prête à l'emploi. Vous pouvez améliorer facilement la trace de la pile.
D'autre part, des outils de compilation tels que Vite et Rollup fournissent des paramètres permettant de le configurer. Il existe également un plug-in Webpack pour effectuer cette opération.
Si vous êtes gestionnaire de frameworks ou de bibliothèques, 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é à cette opération 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 concevons des outils pour intégrer ces nouveaux contextes. Vous pouvez également nous aider en informant les responsables de cette fonctionnalité. Par exemple, vous pouvez signaler un problème dans son dépôt.
Vous pouvez également ajouter manuellement des scripts non pertinents à la liste "Ignorer" directement depuis l'arborescence de fichiers dans les outils de développement > Sources > Page pour obtenir un résultat similaire.
Études de cas: implémentation de Nuxt et d'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 de Nuxt a été marqué comme "à ignorer par les débogueurs".
Pour ce faire, modifiez la configuration de compilation de Nuxt à l'aide de Vite et du 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 aimerait remercier les équipes Vite et Nuxt d'avoir rendu tout 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 de la version 14.1.0 d'Angular, le contenu des dossiers node_modules et webpack a été marqué comme "à ignorer".
Pour ce faire, une modification a été apportée à angular-cli en créant un plug-in qui se connecte au module Compiler du webpack.
Le plug-in webpack que nos ingénieurs a créé effectue des hooks à l'étape PROCESS_ASSETS_STAGE_DEV_TOOLING et remplit le champ ignoreList des mappages source 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 apportées au débogage Angular dans les outils de développement, consultez l'article É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 Angular pour sa précieuse contribution au succès de cette implémentation. Vos efforts et votre collaboration étaient essentiels, et nous apprécions votre travail acharné. Merci à l'équipe Angular d'avoir rendu cela possible !