在iOS模拟器与WebStorm中为React Native设置断点的方法

我用npx react-native init MyAppName初始化了一个React Native项目，依赖配置完成，能在iOS模拟器、Android模拟器和安卓真机上正常运行，但一直找不到合适的断点设置方法。我用WebStorm，希望能直接在IDE里设断点，退一步也接受用Chrome或Electron版调试工具。

当前遇到的问题：

• 目前只能在代码里加debugger;语句触发断点，但WebStorm里不生效，而且这个语句每次都会触发，没法像普通断点那样禁用。
• 之前查资料说要启用“JS Debugger”选项，但开发菜单里已经没有这个选项了，应该是被移除或重命名了。
• 修改了package.json的start脚本，加了--experimental-debugger参数：

  "start": "react-native start --experimental-debugger",
  

• 尝试打开元素检查器时报错：
  
• 用npx react-devtools打开Electron窗口，没法在里面给TypeScript设置断点：
  
• 在终端输入j打开实验性Hermes专属调试器，Sources标签没法浏览代码设置断点，加debugger;语句会在这里触发，但调试后没法轻松移除这个语句，体验很差：
  

完整package.json内容 #

{
  "name": "NameRedacted",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start --experimental-debugger",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

版本信息：

• Node v20.11.1
• macOS Sonoma 14.3.1（Apple Silicon M3 Pro MacBook）

虽然React Native大多是声明式代码，但还是有不少命令式代码需要断点调试，有没有比现在临时方案更便捷的方法？

可行解决方案 #

1. WebStorm直接断点调试（推荐） #

React Native 0.70+默认使用Hermes引擎，WebStorm对其调试支持需配置：

• 打开WebStorm的Run/Debug Configurations，新增React Native配置。
• 配置中选择Debugger为Hermes Debugger，而非旧版Chrome Debugger。
• 启动项目后点击WebStorm调试按钮，同时在设备/模拟器的开发菜单选Debug with Hermes（原JS Debugger重命名后的选项）。
• 此时可直接在WebStorm的TypeScript代码中设置断点，支持禁用、启用等操作，断点正常触发。

2. Chrome调试兼容方案（临时使用） #

若需用Chrome调试，需先禁用Hermes：

• 安卓：修改android/app/build.gradle：

  project.ext.react = [
      enableHermes: false
  ]
  

• iOS：修改Podfile，注释或移除:hermes_enabled => true这一行。
• 重新安装依赖（安卓执行npm install，iOS执行pod install），启动项目后在开发菜单选Debug with Chrome，Chrome调试窗口的Sources标签中找到TypeScript文件（默认开启source map）即可设置断点。

3. 修复React DevTools断点问题 #

React DevTools无法识别TypeScript断点，需确保source map正常生成：

• 检查metro.config.js，默认配置已包含source map，无需额外修改：

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

• 启动React DevTools前，确保项目开启Debug with Hermes模式，在DevTools的组件上右键选Show in debugger，自动跳转至对应代码位置即可设置断点。

4. 优化Hermes实验调试器 #

若使用终端输入j打开的Hermes调试器，解决无法浏览代码问题：

• 恢复package.json的start脚本为默认，移除--experimental-debugger参数：

  "start": "react-native start",
  

• 重启metro服务，打开Hermes调试器后，在Sources标签展开file://目录，即可找到项目TypeScript文件并设置断点。

内容的提问来源于stack exchange，提问作者Nicholas Westby