如何在React Native中使用断点进行调试

Question

请帮助我如何调试带有断点的本机响应，我发现仅适用于android真实设备的解决方案，但无法使用android模拟器和iOS模拟器进行调试。

Answer 1

1. 安装React Native调试器工具
   • 酿造更新&&酿造桶安装react-native-debugger
   • 酒桶重新安装react-native-debugger
2. 如果已运行，请退出Google Chrome。
3. 从Applications文件夹中启动React Native Debugger应用。
4. 激活iOS模拟器并使用键盘运行Command + d。在调试菜单中，选择“远程调试JS”选项。
5. 转到React Native Debugger。从“查看”菜单中选择“切换开发者工具”子菜单项。
6. 选择Sources选项卡（在React Native Debugger窗口中）。
7. 在左侧菜单中，展开RNDebuggerWorker.js并展开子选项localhost：****。您将看到项目的根文件夹。
8. 选择一个.js文件并添加断点。执行相应的行时，断点将被激活。
9. 您可以在底部的控制台区域中看到控制台日志。

Answer 2

您可以通过在chrome devTools 的source标签上的代码行中添加断点来实现，实际上， Google Chrome 之间没有区别< em> devTools 或 React Native Debugger devTools ，打开源并在左窗格中找到 RNDebuggerWorker.js ，然后可以找到您的代码并逐行添加断点以进行调试：

Answer 3

您应该首先为您的模拟器（iOS）/模拟器（Android）启用调试

Android：首先启用调试on通过按CMD+M这里会出现一个弹出窗口然后点击调试，它会启用调试开启用于该模拟器设备。

iOS：点击 CMD+D，会出现弹出窗口，点击调试同样会为该模拟器启用调试。

现在在这些虚拟设备（模拟器/模拟器）之一上运行您的应用程序，调试器 UI 将在默认浏览器选项卡中打开（http://localhost:8081/debugger-ui/） 现在右键单击并单击 Inspect ，它将在此处打开一个窗口，您将看到许多选项卡，单击 sources 并找到要调试代码的文件。在这里只需单击左侧的行号即可添加断点，如下所示。您的应用将在此处进行调试，您可以看到代码发生了什么。

Answer 4

您可以通过在代码行中添加debugger;来实现，Chrome会自动在该行停止。