使用带有es6的chrome进行调试

Question

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

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

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

Answer 1

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

因此，当您尝试在单行语句（例如(foo) => bar放置断点时，实际执行的代码至少有几行，我假设（并且实际上并不知道！）devtools尝试放置真正的断点只是在真实的，运行代码的第一行。 - 这反过来又失败了表达式。

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

希望有所帮助：/

Answer 2

你有没有按照这里的说明进行操作？

此外，如果您设置了启用和声标志，您将不需要使用babeljs进行转换，Chrome将了解ES6 / 2015或至少它支持的子集...所以可能关闭babeljs并避免一起使用源图？

Answer 3

通常我只会责怪源图，但是从你在这里展示的内容我得出的结论是将chrome中的debug与javascript调试器语句进行比较。 我相信他们的工作方式不同。

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

这在你录制的例子中发生了很多。

.then(debugger)

如果您希望能够在那里打破，您必须添加更多代码。

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

关闭源地图也是一个好主意，然后逐行逐步执行代码。

我注意到你想要暂停或承诺流程。 请记住，在复杂的应用程序中暂停异步代码会导致竞争条件以及许多意外行为。

Answer 4

这似乎是Chrome上的一个错误。

如果没有解决你的问题，github上会有一个很大的讨论。 https://github.com/webpack/webpack/issues/2145