调试网页时，修改了代码却看不到效果？或者控制台总在提示“DevTools failed to load SourceMap”？这通常是源码映射（SourceMap）功能在“作祟”。

它本意是方便开发者调试压缩后的代码，但有时也会带来困扰。比如让你操作的文件与实际生效的文件不一致。

别担心，彻底禁用SourceMap有多种途径。你可以根据实际情况，选择最顺手的一种。

一、通过开发者工具设置面板禁用

这是最直接的方法，修改的是Chrome浏览器的全局调试偏好。设置一次，对所有页面都生效，无需重启浏览器，刷新页面即可。

操作步骤如下：

• 在任意网页按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具。
• 点击右上角的三个点图标，进入【设置】（Settings）。
• 在左侧菜单中，依次点击【Preferences】→【Sources】。
• 取消勾选 Enable Ja vaScript source maps 和 Enable CSS source maps 这两个选项。

关闭设置面板，刷新当前网页，那些关于.map文件加载失败的404警告就应该消失了。

二、使用命令面板快速切换

如果你需要频繁切换SourceMap的开关状态，命令面板是最佳选择。它响应迅速，不用在多层菜单里导航。

具体操作如下：

• 确保开发者工具已经打开。
• 按下 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（macOS）唤出命令面板。
• 在输入框里键入 source map。
• 分别选择并执行 Disable Ja vaScript source maps 和 Disable CSS source maps 即可。

每执行一项都会即时生效，你可以立刻观察到断点位置的变化。

三、通过启动参数强制禁用

如果你希望一劳永逸，让整个Chrome浏览器在启动时就禁用SourceMap，可以修改启动参数。

操作前，请先关闭所有正在运行的Chrome窗口。

操作步骤如下：

• 右键点击桌面或任务栏上的Chrome快捷方式，选择【属性】。
• 在【目标】文本框的末尾，先加一个空格，然后追加参数：--disable-source-maps。
• 点击【确定】保存。

之后通过这个快捷方式启动的Chrome，其Network面板中将不会再发起对.map文件的请求。

四、修改 webpack 构建配置

如果你是项目开发者，能从源头解决问题是最彻底的。直接在打包阶段移除SourceMap的输出。

具体操作取决于你的项目框架：

• 原生Webpack项目：打开根目录下的 webpack.config.js 文件，找到 devtool 配置项，将其值设为 false 或 'none'。
• Vue CLI项目：编辑 vue.config.js 文件，添加配置：configureWebpack: { devtool: false }。
• Create React App项目：在执行 npm run build 构建命令前，确保环境变量 GENERATE_SOURCEMAP=false 已设置。

完成配置修改后，重新构建并部署你的静态资源即可。

五、通过 Network 面板拦截 .map 请求

这个方法比较“取巧”，它不改变任何配置，仅阻止当前会话加载.map文件。非常适合临时验证。

操作步骤如下：

• 打开开发者工具的【Network】面板。
• 先勾选上 Preserve log 选项。
• 在过滤器（Filter）栏输入 .map。
• 右键点击任意一个.map请求，选择 Block request URL。
• 在弹出的规则编辑框中，确认匹配模式是 *.map，点击【Add】完成添加。

《夸克》非常好用的免费AI浏览器

下载APP查看