题 使用带有es6的chrome进行调试


我正在尝试将Ecmascript 2015用于我的项目,并且我发现很难在特定的地方添加断点(我认为有一个断点是合乎逻辑的)。

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

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

enter image description here


30
2017-10-15 03:22


起源


由于我已经开始使用es6 / es7功能,因此调试应用程序非常痛苦。而且不仅仅是在Chrome上。我有一些使用webpack和babel的NodeJS应用程序,这和Chrome一样痛苦。我正在使用Visual Studio Code进行调试,我也尝试过使用node-debug,所有相同的问题。 - Ventura
这绝对看起来像破碎的源地图。我和coffeescript有类似的问题。事实证明我错误配置了browserify转换。 - bennidi
其次,问题可能是生成的源映射的问题。您是否尝试过一个孤立的,简单的代码示例? - Jorge Cabot
看起来像一个值得报道的错误 crbug.com 如果尚未报告,请附上最小代码以在错误报告中重现该问题。 - wOxxOm
Sourcemaps今年给我带来了很多悲痛,所以可能就是这样!另外请注意,暂停异步代码会导致竞争条件,这可能会导致各种意外行为。除非代码库相对简单且小而没有其他依赖关系,否则我尽量不这样做。 - Urasquirrel


答案:


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

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

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

希望有所帮助:/


7
2017-10-27 21:13



我已经尝试了一个不同的转换代码,我猜这是问题。但是现在当我尝试设置断点时,浏览器99%会在正确的位置应用断点。不确定浏览器中是否有变化,或者我过去是否做过某些事情,但我想这应该是原因 - Ajai


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

https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps

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


5
2017-10-15 03:28



是。我不认为es6为sourcemaps提到任何具体内容。我已经为es5使用了源图,但没有这个问题。 - Ajai


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

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

这在您的记录示例中发生了很多。

.then(debugger)

enter image description here

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

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

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

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


0
2017-10-27 21:36





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

它固定在金丝雀上: https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21

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


0
2017-11-08 17:39