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

Posted 2023-02-19

【中文标题】不能总是在 Chrome 中设置 React Native 断点

【英文标题】：Can't always set React Native breakpoints in Chrome

【发布时间】：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

【讨论】：

对我不起作用。安装后打印command not found: react-breakpoint-fix