如何使 Chrome 调试真正起作用

Question

React-Native 中的 Chrome 调试在概念上非常棒。如果有效。

let、get、set 等。有很多 es6、es7 功能 Chrome 不允许您设置调试中断。并且使用 async await 时，光标似乎有时会跳遍整个地方，通常会跳到您知道不可能的地方。完全混乱。

关于使 Chrome 调试工作更可靠的任何建议？ （在最新的 Canary 上）

Answer 1

我认为这是关于 Babel 的问题，而不是 React-Native 或 Chrome。 React-native 打包器使用 Babel 将 ES7 和 ES6 功能转移到 ES5 代码，并生成一个.map 文件，让 Chrome 或其他浏览器在调试时知道如何在 ES7/ES6 和 ES5 文件之间映射代码。有些功能很难（或不可能）完美映射，因此如果在源代码中设置断点，您会感到困惑。以我的经验，在 ES5 代码中调试是更好的选择，而像 async/await 这样的功能目前很难调试，所以你应该小心使用它们。

请参阅this article 了解 js sourcemap。