每当你打开 Chrome 或 Firefox 的开发者工具来调试 JavaScript 代码时，你应该禁用 JavaScript 源映射。
为什么要禁用它们
Hacker News 上的一条评论解释了问题：
我无法让观察的变量正常工作。它的作用域和更新规则对我来说是个谜。我认为只有全局变量才能被观察，但即使是这样，它也从来不按照我期望的方式工作，所以在测试时我只是不断地往日志中输出值。 - russellbeattie
JavaScript 源映射在读取压缩/编译后的 JavaScript 源代码和调用栈时非常有用。令人反直觉的是，如果你在调试器中与源代码进行交互，禁用 JavaScript 源映射会带来更好的体验。
示例
为了演示问题，让我们分别在调试器中查看有源映射和无源映射的相同源代码，并看看哪些功能有效，哪些不有效。
关闭source maps
当source maps关闭时，我们可以悬停在表达式上并查看其值。请注意，我们可以将表达式添加到“观察表达式”窗格中，其值会被正确显示：
✅ 工具提示正常工作 ✅ 观察表达式正常工作
当关闭source maps时，我们能够在 JS 控制台中使用表达式 n（如源代码中所见）：
关闭源映射后的 Firefox 控制台截图✅ 在控制台中使用表达式正常工作
打开source maps
打开source maps后，我们无法再悬停在表达式上并查看其值。将表达式添加到“观察表达式”窗格中也不起作用：
打开源映射后的 Firefox 调试器截图❌ 工具提示失效 ❌ 观察表达式失效
打开源映射后，我们无法再在 JS 控制台中使用表达式结果（如源代码中所见）：
打开源映射后的 Firefox 控制台截图❌ 在控制台中使用表达式失效
如何禁用它们
Chrome
在 Chrome 开发者工具中，切换 CSS 或 JS 源映射的最简单和最快的方法是使用 Chrome 的命令面板：
- 1.在
macOS上，按cmd+shift+p（在Windows上按ctrl+shift+p） - 2.搜索
“source map” - 3.选择启用/禁用
CSS或JS源映射，选择你想要切换的选项：显示Chrome命令面板截图，显示了切换CSS和JavaScript源映射选项
Firefox
在 Firefox 中没有类似的快捷键，但你可以从开发者工具的设置中切换source maps的开/关状态。请注意，可能需要刷新页面才能生效。我相信这会切换JS和 CSS 源映射：
显示 Firefox 设置截图，显示了切换源映射选项
作为替代方案，你也可以直接从调试器中禁用source maps，而无需进入设置：
为什么会这样？
在开发者工具调试器中，source maps不应该默认启用。一旦source maps可用，浏览器默认会破坏许多调试器的关键功能，并以一种对开发者完全不明显的方式破坏它们（例如，将未定义渲染为工具提示中的undefined可能会让开发者误以为这个值确实是未定义）。
至于如何改进source maps对调试体验的影响：TC-39 提出了一个source maps版本4的RFC，旨在改进“事后调试能力”。