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

Posted 2023-02-22

【中文标题】如何在 React Native 中使用断点进行调试

【英文标题】：How to debug with breakpoints in React Native

【发布时间】：2019-08-22 21:47:03

【问题描述】：

请帮助我如何在带有断点的 react native 中进行调试，我找到了仅适用于 android 真实设备的解决方案，但无法使用 android 模拟器和 ios 模拟器进行调试。

【参考方案1】：

安装 React Native Debugger 工具 brew update && brew cask install react-native-debugger brew cask reinstall react-native-debugger 如果 Google Chrome 已经在运行，请退出它。 从 Applications 文件夹启动 React Native Debugger 应用程序。 激活 iOS 模拟器并使用键盘运行 command+d。在调试菜单中选择“远程调试 JS”选项。 转到 React Native 调试器。从“查看”菜单中选择“切换开发者工具”子菜单项。 选择 Sources 选项卡（在 React Native Debugger 窗口中）。 在左侧菜单中，展开 RNDebuggerWorker.js 并展开子选项 localhost:****。您将看到项目根文件夹。 选择一个 .js 文件并添加断点。执行相应的行时将激活断点。 您可以在底部的控制台区域看到控制台日志。

【讨论】：

谢谢，这帮助我找到了一个我尝试调试了 8 个多小时的错误

【参考方案2】：

你可以通过在chrome devTools的source选项卡上的代码行中添加断点来实现，实际上，Google Chrome 没有区别devTools 或 React Native Debugger devTools，打开源代码并在左侧窗格中找到 RNDebuggerWorker.js 即可找到您的代码并逐行添加断点调试：

【讨论】：

@AmerlicA，试着在你的代码中输入调试器这个词；）否则很好的答案！

【参考方案3】：

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

【讨论】：

谢谢。就是这么简单。

【参考方案4】：

您应该首先为您的 Simulator(iOS)/Emulator(Android) 启用调试

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

iOS：点击CMD+D，会弹出点击Debug同样会启用该模拟器的调试。

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

【讨论】：

我正在使用 iOS 模拟器，但在 Safari 的 Sources 选项卡下，它没有显示我项目的 .js 文件。在这里做什么？