禁用 SourceMap 的五种方法：一、开发者工具设置中取消勾选 JS/CSS 源码映射；二、命令面板输入指令快速禁用；三、Chrome 启动参数添加 --disable-source-maps；四、Webpack 配置 devtool 设为 false 或 'none'；五、Network 面板拦截 .map 请求。
如果您在使用谷歌浏览器开发者工具调试网页时，发现修改 JavaScript 或 CSS 代码后不生效，或控制台频繁提示“DevTools failed to load SourceMap”，这通常是因为浏览器启用了源码映射（SourceMap）功能，导致实际操作对象为映射后的调试文件而非原始打包文件。以下是禁用 SourceMap 的多种可行方法：
一、通过开发者工具设置面板禁用
该方式直接修改 Chrome 的全局调试偏好，对当前用户所有页面生效，无需重启浏览器，操作后刷新页面即可验证效果。
1、在任意网页中按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具。
2、点击右上角三个圆点图标，选择【设置】（Settings）。
3、在左侧菜单中点击【Preferences】→【Sources】。
4、取消勾选Enable JavaScript source maps和Enable CSS source maps两项。
5、关闭设置面板，刷新当前网页，控制台将不再显示 .map 文件加载失败的 404 警告。
二、使用命令面板快速切换
Chrome 命令面板提供快捷入口，可即时启用或禁用 SourceMap，适合高频调试场景，响应迅速且无需导航多层菜单。
1、确保开发者工具已打开，聚焦于任意面板（如 Console 或 Sources）。
2、按下 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（macOS）唤出命令面板。
3、在输入框中键入source map，等待建议列表出现。
4、从下拉选项中分别选择：Disable JavaScript source maps和Disable CSS source maps。
5、每执行一项即刻生效，无需刷新页面亦可观察断点位置变化（例如断点将跳转至压缩后文件中的真实行号）。
三、通过启动参数强制禁用
该方法作用于浏览器进程级，适用于需长期固定禁用 SourceMap 的开发环境，可避免每次手动设置，但需重新启动 Chrome 实例。
1、关闭所有正在运行的 Chrome 窗口（包括后台进程，可在任务管理器中结束 chrome.exe 进程）。
2、右键点击 Chrome 快捷方式，选择【属性】。
3、在【目标】文本框末尾添加空格后追加：--disable-source-maps。
4、点击【确定】保存更改，双击快捷方式重新启动 Chrome。
5、打开任意网页并开启开发者工具，Network 面板中将不再发起对 .map 文件的请求。
四、在 Webpack 构建配置中禁用
该方式从源头移除 SourceMap 生成，适用于本地开发与构建流程统一管控，可彻底避免浏览器端加载尝试。
1、打开项目根目录下的 webpack.config.js 文件。
2、定位到 devtool 配置项。
3、将其值修改为：false 或 'none'。
4、保存文件并重新运行 npm run build 或对应构建命令。
5、重新加载网页，Sources 面板中将仅显示压缩后文件，且无 sourceMappingURL 注释被注入。
五、通过 Network 面板拦截 .map 请求
该方式不修改任何配置或设置，仅在当前调试会话中阻断 SourceMap 加载，适合临时规避干扰而不影响其他环境。
1、打开开发者工具，切换至 Network 面板。
2、刷新网页，待资源加载完成。
3、在过滤栏中输入 .map，筛选出所有映射文件请求。
4、右键任一 .map 请求，选择 Block request URL。
5、刷新页面后，所有匹配该 URL 模式的 .map 请求将被静默拦截，控制台不再出现相关报错。
