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

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

你可以在chrome devTools 的source标签页中添加断点，实际上Google ChromedevTools 和React Native DebuggerdevTools 没有区别，打开源代码，在左窗格中找到**RNDebuggerWorker.js**，你可以找到你的代码，并添加断点，逐行调试：

的数据

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

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

x1c 0d1x的数据

**iOS：**点击CMD+D，弹出菜单，点击【调试】，即可调试该模拟器。

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

的

在我的例子中，我不得不更新我的metro配置（metro.config.js）如下：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

字符串
然后我需要确保这些都包含在我的包中。json：

"@react-native/metro-config": "^0.72.9",
"metro-config": "^0.77.0",

型
在此之后，我进行了清理，并做了一个新的设备构建（用于iOS），在运行调试器后，断点开始在VS Code中立即附加（之前，我只会得到一个灰色圆圈）。