javascript - 使用 es6 使用 chrome 进行调试

Question

我正在尝试将 Ecmascript 2015 用于我的项目，但我发现很难在特定位置(我认为有断点的位置)添加断点。

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

为了引用，我添加了我正在谈论的内容的 GIF。

Answer 1

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

因此，当您尝试在单行语句(例​​如 (foo) => bar)中放置断点时，actual executed code至少有几行长，我假设(并且真的不知道!)devtools 试图将真正的断点简单地放在实际运行代码的第一行。 - 这又会导致表达式失败。

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

希望对您有所帮助:/