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

Question

请帮助我如何使用断点调试 React Native，我只找到了 android 真实设备的解决方案，但无法使用 android 模拟器和 iOS 模拟器进行调试。

Answer 1

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

Answer 2

你可以通过在 chrome source 选项卡 devTools 的代码行中添加断点来实现，实际上，Google Chrome devTools 或 React Native Debugger devTools ，打开源码，在左边找到RNDebuggerWorker.js，就可以找到你的代码，逐行加断点调试：

Answer 3

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

Answer 4

您应该首先为模拟器(iOS)/模拟器(Android)启用调试

Android: 首先启用调试 on 通过在此处按 CMD+M 将出现一个弹出窗口然后单击 Debug ，它将为该模拟器设备启用调试 on。

iOS: 单击 CMD+D，将出现弹出窗口，单击 Debug 同样，它将启用该模拟器的调试.

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