在 Chrome DevTools 中禁用源映射

Question

有没有一种快速方法可以从 Chrome DevTools 中显示的 jsx 代码切换到原始 ES5 并再次切换回来？

Answer 1

打开开发者工具，转到开发者工具的“设置”，然后取消选中“源”设置下的

Enable JavaScript Sourcemaps

。

Answer 2

您可以双击行号从源文件跳转到未缩小的输出文件。除此之外，它似乎很有限。请参阅下面的评论。

我发现这在开发过程中很有用。当使用

webpack-dev-server

（或其他一些工具）而不缩小js时，您可以双击源文件中的行号以跳转到已编译但未缩小的输出文件。

我只是偶然发现了这一点，然后发现了2016年12月21日的这条评论： https://bugs.chromium.org/p/chromium/issues/detail?id=532174#c7

可以双击行号跳转到原文 文件，但如果缩小的文件包含所有换行符，则毫无用处 已删除:(

自动换行会让这项工作变得更好 https://bugs.chromium.org/p/chromium/issues/detail?id=167287

我认为双击某个部分有一些支持 缩小文件跳转到源映射文件，但似乎 最近已经退步了。

理想情况下，在带有源映射的缩小文件中，右键单击（或 双击）缩小文件中的任何位置都应该允许跳转到 确切的文件、行和列

Answer 3

在 Chrome 调试器中切换 CSS 或 JS 源映射的最简单、最快的方法是使用 Chrome 的命令面板：

1. 在 macOS 上输入 cmd+shift+p（在 Windows 上输入 ctrl+shift+p）
2. 搜索“源图”
3. 选择启用/禁用 CSS 或 JS 源映射，无论您要切换哪个：