如何永久隐藏或消除DevTools中第三方库的Sourcemap解析警告？

我完全懂你被这些反复弹出的第三方库Sourcemap警告折腾的烦躁——自己项目的sourcemap明明正常工作，偏偏node_modules里的库老是触发警告，而且“仅所选上下文”的设置还不持久，每次开DevTools都得重新操作。下面给你两个层面的靠谱解决方案，按需选择：

方案一：通过Webpack配置彻底根除警告（推荐） #

这是从构建源头解决问题的方式，让Webpack直接跳过对node_modules目录下文件的sourcemap处理，自然就不会触发DevTools的加载警告。修改你的SourceMapDevToolPlugin配置，加上exclude选项：

new webpack.SourceMapDevToolPlugin({
  filename: '[name].map',
  exclude: /node_modules/ // 排除所有第三方库的sourcemap处理
})

配置生效后，Webpack只会为你自己的业务代码（比如src目录下的文件）生成sourcemap，第三方库的sourcemap引用会被直接忽略，DevTools也就不会去尝试加载那些不存在或路径错误的.map文件了。

如果你需要保留个别第三方库的sourcemap（比如需要调试特定依赖），可以换用include选项，只指定自己的代码目录：

new webpack.SourceMapDevToolPlugin({
  filename: '[name].map',
  include: /src/ // 仅处理src目录下的代码
})

方案二：永久过滤Chrome DevTools的警告 #

要是不想修改Webpack配置，也可以通过DevTools的过滤功能永久隐藏这类警告，步骤很简单：

1. 打开Chrome DevTools，切换到Console面板
2. 找到任意一条DevTools failed to parse SourceMap警告，右键点击它
3. 选择Add pattern to filter
4. 在弹出的对话框中，输入DevTools failed to parse SourceMap，然后选择Exclude（排除）选项
5. 点击Add完成设置

这个过滤规则会被Chrome永久保存，下次打开DevTools时这类警告会自动被隐藏，不用再重复操作。

问题根源说明 #

其实这类警告的本质是：很多第三方库发布时会在代码末尾加上sourcemap的引用注释（比如//# sourceMappingURL=xxx.map），但并没有把对应的.map文件一起发布，或者文件路径在你的项目环境下无法被DevTools正确解析，导致加载失败抛出警告。通过上面两种方式，要么从构建阶段切断无效引用，要么在DevTools层面过滤警告，都能彻底解决问题。

内容的提问来源于stack exchange，提问作者Undistraction