用es6调试chrome [英] Debugging with chrome with es6

问题描述

我正在尝试使用Ecmascript 2015作为我的项目，我发现很难在特定的地方添加断点（我认为逻辑上有一个断点的地方）。

I am trying to use Ecmascript 2015 for my project and I am finding it hard to add breakpoints at specific places (places I thought was logical to have a breakpoint).

我将chrome中的＃enable-javascript-harmony标志设置为true（如果有帮助），但是我使用babeljs来扫描并具有源代码直接设置断点我想要调试的文件。我确信我做错了事情，但有人可以指出我犯错误的地方。

I have #enable-javascript-harmony flag in chrome set to true (if that helps), but I am using babeljs to transpile and have sourcemaps to directly set breakpoints in the file that I want to debug. I am most certain that I am doing something wrong but can somebody point me where I am making mistake.

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

For reference I have added a GIF of what I am talking about.

推荐答案

问题在于源代码（通过源地图）到实际的代码映射。虽然源码简明扼要，但生成的代码通常较长，两者之间的映射不会（也可能不能）以保证两者之间1：1关系的方式完成。

The problem is with source code (via source maps) to real code mapping. While the source is concise and dense, the generated code is typically longer and the mapping between the two isn't (and probably cannot be) done in a way which will guarantee a 1:1 relationship between the two.

所以当你尝试在单行语句中放置一个断点，例如（foo）=> bar ，实际执行代码处于至少有几行，我假设（并不真正知道！），devtools尝试将真正的断点放在真正的运行代码的第一行。 - 这反过来失败了表达式。

So when you try to place a breakpoint in a single line statement such as (foo) => bar, the actual executed code is at least a few lines long and I assume (and don't really know!) that devtools tries to place the real breakpoint simply on the first line of the real, running code. - Which in turn fails for expressions.

它是生成代码的固有缺点，适用于具有源地图的所有编译到js语言。不幸的是，我不知道一个很好的解决方法。作为这种情况下的最后手段，我只是在浏览器中关闭源地图，并逐步通过真实的生成代码。

It is an inherent disadvantage of generated code and applies to all compile-to-js languages with source maps. Unfortunately, I'm not aware of a good workaround. As a last resort in these cases I just turn off source maps in the browser and step through the real, generated code.

希望有助于：/

这篇关于用es6调试chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！