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

【问题标题】：How to debug with breakpoints in React Native如何在 React Native 中使用断点进行调试
【发布时间】：2019-08-22 21:47:03
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native debugging native breakpoints

【解决方案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 文件。在这里做什么？