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 确保路径可匹配）：
- 在
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')
}
};
如何在 Vite 中配置 ignoreList
Vite 4.3+ 支持通过 build.rollupOptions.output.sourcemapIgnoreList 注入（底层基于 Rollup）：
- 该函数接收
sourceFile（原始源文件路径）和sourcemapPath（map 文件路径）两个参数 - 返回
true表示忽略该源文件（即加入 ignoreList），false表示保留 - 示例（vite.config.ts）：
export default defineConfig({
build: {
rollupOptions: {
output: {
sourcemapIgnoreList: (sourceFile, sourcemapPath) => {
return (
sourceFile.includes('node_modules') ||
sourceFile.includes('dist') ||
sourceFile.includes('vendor')
);
}
}
}
}
});
构建后生成的 .map 文件中会包含类似：
"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
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
