使用 React Native Firebase 时如何远程调试 JS

Posted 2023-02-19

【中文标题】使用 React Native Firebase 时如何远程调试 JS

【英文标题】：How can I debug JS remotely when using React Native Firebase

【发布时间】：2019-06-14 08:00:47

【问题描述】：

所以我有一个基于 react-native-firebase-starter 的 React Native 应用程序，我想使用更好的工具进行调试，而不仅仅是通过 react-native log-android 输出的 console.log。调试器断点、对象检查等。

对于标准的 React Native 应用程序，可以使用“远程调试 JS”选项，据我了解，该选项在桌面 Chrome 中运行应用程序的 JS，因此可以使用它的开发工具。

这似乎不适用于 React Native Firebase。我认为这是因为它使用了许多原生 Android/ios 模块以及仅限移动设备的 Firebase 身份验证，因此只能在设备上完全运行。 ...或类似的东西。

我做错了什么还是有办法解决这个问题？什么调试设置会给我最好的 DX？

【问题讨论】：

你想调试什么？如果您的应用程序崩溃？输出不正确？您将从本机调试（Xcode 或 adb）或 JS 调试中受益。

@BaronVonKaneHoffen 欢迎来到 React-Native 的世界！在启用 Chrome 调试的情况下，不仅设备，而且模拟器/模拟器也难以执行 firebase 方法。在我的情况下，结果是应用程序只是坐在那里而没有任何反应。哦，情况会变得更糟；它有时有效。喜欢它的工作原理，然后 Bam！停止工作，无需更改代码。如果你真的关心这个开发平台并希望看到它得到改进，那么你应该在 react-native Firebase Github 站点上打开一个 bug 票。但是我没有。

【参考方案1】：

示例项目react-native-firebase-starter 是本地构建的（而不是使用 Expo 创建的），因此可以使用您提到的调试工具按预期工作。

确保在运行应用程序时选择构建变体Debug，如Release 模式 Metro Bundler / Packager 和调试工具不可用。

如果通过 Chrome 开发工具的调试级别不够，还有其他为 React Native 创建的工具具有更好的功能（例如断点）。最值得注意的是：

React Native Tools Visual Studio Code 的扩展名。允许在编辑器中设置断点和迭代代码。

React Native Debugger，具有与 Chrome 开发工具类似的界面，并允许在 Sources 选项卡中设置断点。

最新的安装说明和配置在各自的存储库中提供。

---

【讨论】：

没错。我已经确定我正在进行调试构建，并且我在 Chrome 开发工具中看到了活动。问题是，从 Firestore 中获取记录等 Firebase 功能在从那里运行时似乎不起作用。

这对进一步输入@BaronVonKaneHoffen 很有用。这些要调试的函数调用是用 javascript 编码的吗？

是的。因此，例如，我可以在我的 App.js 中使用 firebase.firestore(); 初始化 Firestore DB，然后尝试执行查询，例如 await result = db.collection('whatever').doc('123').get();，这在设备上运行时可以正常工作。但是，启用远程 JS 调试后，它永远不会完成……可能是在 JS 环境之外的某个地方出错。我可以在下一行 console.log(result); 并且没有任何东西到达控制台。

@BaronVonKaneHoffen 我为内置调试器添加了两个很好的替代方案，它们也允许代码断点。让我知道这是否有帮助。

啊太棒了！尝试使用react-native-debugger，它成功了！非常感谢 :-D ...其他人在看这个：我通过自制软件安装，然后用 open "rndebugger://set-debugger-loc?host=localhost&port=8081" 打开，在设备上启用“远程调试 JS”，现在所有 Firestore 通信似乎都可以正常工作，使用调试器附上。