ignoreList 是 SourceMap v3 规范中新增的可选字段，为字符串数组，每项是不带斜杠和标志的正则字符串，用于指示 DevTools 自动跳过匹配路径的源码调试（如 node_modules），提升断点效率；Webpack 5.74+ 通过 devtoolIgnoreList 配置，Vite 4.3+ 通过 sourcemapIgnoreList 函数配置，生成的 .map 文件包含该字段，Chrome 119+、Edge 119+、Firefox 120+ 支持，旧版浏览器忽略无降级。
在浏览器开发者工具中，可以通过 ignoreList 配置让 DevTools 自动跳过第三方依赖的源码（如 node_modules 中的代码），从而避免调试时频繁跳进无关文件、提升断点调试效率。这需要在构建工具（如 Webpack、Vite）生成 SourceMap 时注入 ignoreList 字段，并确保浏览器支持（Chrome 119+、Edge 119+、Firefox 120+ 已支持）。
什么是 ignoreList？
ignoreList 是 SourceMap v3 规范中新增的一个可选字段，类型为字符串数组，每一项是正则表达式字符串（不带 / 包裹，也不含 flags）。当 DevTools 尝试在 Sources 面板中定位源码位置或执行“Step into”操作时，若匹配到该列表中的路径，就会自动跳过，继续执行下一步逻辑（比如跳进下一个非忽略函数）。
它不是屏蔽文件加载，而是告诉 DevTools：“这些路径的代码你别停，也别展开显示在调用栈里”——对调试体验影响直接且显著。
如何在 Webpack 中配置 ignoreList
Webpack 5.74.0+ 原生支持 devtool: 'source-map' 下的 ignoreList 选项（需配合 output.devtoolModuleFilenameTemplate 确保路径可匹配）：
立即学习“Java免费学习笔记（深入）”；
- 在
webpack.config.js的devtool设为'source-map'或'inline-source-map' - 添加
devtoolIgnoreList配置项，返回要忽略的路径正则字符串（注意：是字符串，不是 RegExp 对象） - 推荐写法（忽略所有 node_modules 和绝对路径的第三方模块）：
module.exports = {
devtool: 'source-map',
devtoolIgnoreList: [/node_modules/, //dist//],
output: {
devtoolModuleFilenameTemplate: ({ resourcePath }) =>
resourcePath.replace(/^(.*?)([\/])node_modules[\/]/, '[vendor]$2')
}
};
</font>
<H3>如何在 Vite 中配置 ignoreList</H3>
<p>Vite 4.3+ 支持通过 <code>build.rollupOptions.output.sourcemapIgnoreList</code> 注入（底层基于 Rollup）：</p>
<ul>
<li>该函数接收 <code>sourceFile</code>（原始源文件路径）和 <code>sourcemapPath</code>（map 文件路径）两个参数</li>
<li>返回 <code>true</code> 表示忽略该源文件（即加入 ignoreList），<code>false</code> 表示保留</li>
<li>示例（vite.config.ts）：</li>
</ul>
<font color="#666">
<pre class="brush:php;toolbar:false;">
export default defineConfig({
build: {
rollupOptions: {
output: {
sourcemapIgnoreList: (sourceFile, sourcemapPath) => {
return (
sourceFile.includes('node_modules') ||
sourceFile.includes('dist') ||
sourceFile.includes('vendor')
);
}
}
}
}
});
</font>
<p>构建后生成的 <code>.map</code> 文件中会包含类似：</p>
<font color="#666">
<pre class="brush:php;toolbar:false;">
"ignoreList": ["node_modules", "dist", "vendor"]
验证 ignoreList 是否生效
打开 Chrome DevTools → Sources 面板 → 右键任意 JS 文件 → “Add folder to workspace”（可选）→ 打断点并触发调试：
- 按 F11（Step into） 时，如果当前调用来自
lodash-es或react-dom，DevTools 应直接跳过，进入你项目内的下一层函数 - 在 Call Stack 面板中，被忽略的帧会显示为灰色、带 “(ignored)” 标识，且不可点击展开
- 查看生成的
.map文件（Network → 找对应 JS → 点开 map 内容），确认存在"ignoreList"字段
注意：旧版浏览器（Chrome < 119）会完全忽略该字段，无降级行为；Safari 目前暂不支持 ignoreList。
