javascript 使用 es6 使用 chrome 进行调试
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33139295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debugging with chrome with es6
提问by Ajai
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).
我正在尝试将 Ecmascript 2015 用于我的项目，但我发现很难在特定位置（我认为设置断点合乎逻辑的位置）添加断点。
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.
我已将 chrome 中的 #enable-javascript-harmony 标志设置为 true（如果有帮助），但我使用 babeljs 进行转译，并使用源映射直接在我想要调试的文件中设置断点。我很确定我做错了什么，但有人可以指出我哪里出错了。
For reference I have added a GIF of what I am talking about.
作为参考，我添加了我正在谈论的 GIF。
回答by Nick Ribal
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.
问题在于源代码（通过源映射）到实际代码的映射。虽然源代码简洁而密集，但生成的代码通常更长，并且两者之间的映射不能（也可能不能）以保证两者之间 1:1 关系的方式完成。
So when you try to place a breakpoint in a single line statement such as (foo) => bar, the actual executed codeis 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.
所以，当你尝试把一个断点在一行中的语句，例如(foo) => bar，在实际执行的代码是至少几行，我认为（和真的不知道！）那devtools试图简单地把真正的断点上实际运行代码的第一行。- 反过来，表达式失败。
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.
这是生成代码的固有缺点，适用于所有带有源映射的 compile-to-js 语言。不幸的是，我不知道一个好的解决方法。作为在这些情况下的最后手段，我只是关闭浏览器中的源映射并逐步执行真实的生成代码。
Hope that helps :/
希望有帮助：/
回答by arislan
Have you followed all the instructions here?
您是否已按照此处的所有说明进行操作？
https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps
https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps
Also, if you have enable harmony flag set, you won't need to use babeljs to transpile, Chrome will understand ES6/2015 or at least the subset it supports... so maybe turn off babeljs and avoid sourcemaps all together?
此外，如果您启用了和谐标志集，您将不需要使用 babeljs 进行转译，Chrome 将理解 ES6/2015 或至少它支持的子集......所以也许关闭 babeljs 并避免使用源映射？
回答by Urasquirrel
Normally I would solely blame sourcemaps, but from what you are showing here I am drawing a conclusion from comparing debug in chrome to the javascript debugger statement. I believe they do not work that differently.
通常我只会责怪源映射，但是根据您在此处显示的内容，我通过将 chrome 中的调试与 javascript 调试器语句进行比较得出结论。我相信它们的工作方式并没有那么不同。
So we know that you cannot place a debugger statement within a functions parameters area.
所以我们知道您不能在函数参数区域内放置调试器语句。
This is happening alot in your recorded example.
这在您录制的示例中经常发生。
.then(debugger)
If you want to be able to break there you must add more code.
如果您希望能够在那里中断，则必须添加更多代码。
.then((whatever) => {
// We need an existing empty line here.
return whatever
})
Also turning off source maps is a good idea too, and then just step through the code line by line.
关闭源映射也是一个好主意，然后逐行逐行执行代码。
I notice that you want to pause near or in promise flow. Remember this warning that pausing async code in complex apps can cause race conditions and furthermore lots of unexpected behavior.
我注意到您想在承诺流程附近或中暂停。 请记住这个警告，在复杂的应用程序中暂停异步代码可能会导致竞争条件以及许多意外行为。
回答by Thiago C. S Ventura
It seems to be an error on Chrome.
这似乎是 Chrome 上的错误。
It's fixed on Canary: https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21
它已在 Canary 上修复：https: //bugs.chromium.org/p/chromium/issues/detail?id =611328#c21
There's a big discussion going on in github if it doesn't solve your problem. https://github.com/webpack/webpack/issues/2145
如果 github 不能解决您的问题，则会在 github 中进行大讨论。 https://github.com/webpack/webpack/issues/2145
