使用 es6 调试 chrome答案

【问题标题】：Debugging with chrome with es6使用 es6 调试 chrome
【发布时间】：2016-01-13 08:46:52
【问题描述】：

我正在尝试将 Ecmascript 2015 用于我的项目，我发现很难在特定位置添加断点（我认为有断点的地方是合乎逻辑的）。

我将 chrome 中的 #enable-javascript-harmony 标志设置为 true（如果有帮助的话），但我正在使用 babeljs 进行转译，并让 sourcemaps 直接在我要调试的文件中设置断点。我最确定我做错了什么，但有人能指出我在哪里犯错。

作为参考，我添加了我正在谈论的内容的 GIF。

【问题讨论】：

自从我开始使用 es6/es7 功能以来，调试应用程序真的很痛苦。不仅在 Chrome 上。我有一些使用 webpack 和 babel 的 NodeJS 应用程序，这和 Chrome 一样痛苦。我正在使用 Visual Studio Code 进行调试，并且我也尝试过使用 node-debug，所有相同的问题。
这绝对看起来像损坏的源映射。我对咖啡脚本也有类似的问题。原来我错误地配置了 browserify 转换。
第二个问题的可能性是生成的源地图有问题。您是否尝试过一个孤立的、简单的代码示例？
看起来像一个值得在 crbug.com 上报告的错误如果尚未报告，请附上最小代码以在错误报告中重现该问题。
Sourcemaps 今年给我带来了很多悲伤，可能就是这样！另请注意，暂停异步代码可能会导致竞争条件，从而导致各种意外行为。我尽量不这样做，除非代码库相对简单且小且没有其他依赖项。

【解决方案1】：

问题在于源代码（通过源映射）到实际代码的映射。虽然源代码简洁而密集，但生成的代码通常更长，并且两者之间的映射没有（也可能不能）以保证两者之间 1:1 关系的方式完成。

因此，当您尝试在 (foo) => bar 等单行语句中放置断点时，actual executed code 至少有几行长，我假设（并且不知道！）devtools 试图放置真正的断点只是在真正的运行代码的第一行。 - 这反过来又会导致表达式失败。

这是生成代码的固有缺点，适用于所有带有源映射的 compile-to-js 语言。不幸的是，我不知道一个好的解决方法。在这些情况下，作为最后的手段，我只是在浏览器中关闭源映射并逐步执行真实的生成代码。

希望对您有所帮助：/

【讨论】：

我在不同的转译代码中尝试过，我猜这就是问题所在。但是现在当我尝试放置断点时，浏览器 99% 会在正确的位置应用断点。不确定浏览器是否发生了变化，或者我过去是否做过某些事情，但我想这应该是原因

【解决方案2】：

您是否按照此处的所有说明进行操作？

另外，如果你启用了 Harmony 标志集，你就不需要使用 babeljs 来编译，Chrome 会理解 ES6/2015 或者至少它支持的子集......所以也许关闭 babeljs 并一起避免 sourcemaps ?

【讨论】：

【解决方案3】：

通常我只会责怪源映射，但根据您在此处显示的内容，我通过将 chrome 中的调试与 javascript 调试器语句进行比较得出了一个结论。我相信它们的工作方式并没有那么不同。

所以我们知道您不能在函数参数区域中放置调试器语句。

这在您录制的示例中经常发生。

.then(debugger)

如果你想打破那里，你必须添加更多的代码。

.then((whatever) => { 
 // We need an existing empty line here.
 return whatever
})

同时关闭源映射也是一个好主意，然后只需逐行执行代码。

我注意到您想在 Promise Flow 附近或在 Promise Flow 中暂停。 请记住这条警告，即在复杂应用中暂停异步代码可能会导致竞争条件以及大量意外行为。

【讨论】：

【解决方案4】：

这似乎是 Chrome 上的错误。

如果没有解决您的问题，github 中正在进行一场大讨论。 https://github.com/webpack/webpack/issues/2145

【讨论】：