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

标签 javascript google-chrome ecmascript-6 google-chrome-devtools

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

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

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

enter image description here

最佳答案

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

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

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

希望对您有所帮助:/

关于javascript - 使用 es6 使用 chrome 进行调试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33139295/

相关文章:

javascript - 如何解析这个包含queryselector的函数参数?

Javascript 初学者 - 谁能告诉我为什么我的按钮不起作用?

database - Chrome (Webkit) WebSQL 数据库最大文件大小?

reactjs - 如何在 React es6 组件中定义静态?

javascript - ES6中的 `export var a = 1`和 `export a`有什么区别?

javascript - 标记模板文字混淆

javascript - 根据父数组位置获取最后一个存在的子数组

javascript - 负载第一师应该是开放的

css - chrome v safari 上的字体渲染 .. 这个网站是怎么做到的?

javascript - Chrome/webkit中原生javascript解压功能