不能总是在 Chrome 中设置 React Native 断点答案

【问题标题】：Can't always set React Native breakpoints in Chrome不能总是在 Chrome 中设置 React Native 断点
【发布时间】：2016-09-01 21:42:35
【问题描述】：

在 Chrome 中调试我的 React Native 应用程序时，我经常无法在 Sources 选项卡中设置断点。当我单击一行代码添加断点时，会在我的模块中的下一个函数声明行中添加一个断点。

这不会发生在我的所有源模块中，但经常会妨碍我进行有效调试。

我目前使用的是 RN 0.22，但旧版本的 RN 也出现这种情况（例如 RN 0.18）。

【问题讨论】：

我遇到了同样的问题。我想知道你是否已经解决了。如果是这样，您能否在此处更新您的解决方案？
没有，还没解决。
还有人遇到这个问题吗？我正在使用 Expo 和 React Native Debugger，而且我的断点通常不会被击中并且会发生奇怪的事情。我对 React Native 工具感到非常沮丧。

【解决方案1】：

这个问题可能是由 babel 引起的。当普通函数和箭头函数一起使用时，就会发生这种情况。

【讨论】：

我确实使用箭头函数。我用我想调试的模块之一中的常规函数调用替换了所有这些。但它并没有解决这个问题。不过感谢您的想法。
当我最初尝试这个解决方案时不确定我哪里出错了，但这里有更详细的答案，发布在 git react-native 上。将 function someFn() {} 替换为 const someFn = () => {} 您尝试在其中设置断点的源文件中不能有任何函数。github.com/facebook/react-native/issues/10729

【解决方案2】：

.babelrc 中的"sourceMaps": "inline" 为我修复了这个问题。

【讨论】：

欢迎来到 Stack Overflow！这可能是正确的答案，但要使其成为一个好的答案，最好添加解释和示例，说明这是如何或为什么是正确的解决方案。我建议阅读How to Answer 页面了解更多信息。
对我不起作用。为我把所有东西放在一条线上

【解决方案3】：

我仅在以下情况下遇到过此问题： 1) .js 文件包含多个函数，并且 2) 试图在一个不是 .js 文件中最后一个函数的函数中设置断点

因此，部分解决方法是移动一个函数，使其成为 .js 文件中的最后一个函数。或者，您可以为每个文件分配一个函数。无论哪种方式，您都可以设置断点。

这远非理想，但这是我迄今为止找到的唯一“解决方案”。

【讨论】：

【解决方案4】：

我有同样的问题，我现在有一个舒适的解决方案：我将“调试器”一词放在要调试的文件中。我刷新浏览器以查看它是否停止。停止后，我可以添加任意数量的断点并从文件中删除“调试器”字

【讨论】：

【解决方案5】：

试试这个包 https://www.npmjs.com/package/react-breakpoint-fix

只需安装软件包并从终端运行 react-breakpoint-fix。

这为我解决了问题。我正在使用 react-scripts@3.x

【讨论】：