使用带有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并避免一起使用源图？