WebStorm 2023.2.4(MacOS)调试Expo React Native iOS断点失效排查

• 正确启动调试流程
  别直接用WebStorm的Run按钮启动项目，先在终端执行npx expo start --dev-client（SDK49推荐使用开发客户端模式），启动后在iOS模拟器中打开应用，再回到WebStorm选择Attach to Process，选中对应的Expo进程。

• 核对WebStorm调试配置

  1. 打开Run/Debug Configurations，确认配置类型为React Native
  2. 配置项里Target device选择iOS simulator，勾选Enable debugging
  3. JavaScript debugger设置为WebStorm，不要选Chrome（WebStorm断点依赖自身调试器）

• 确保Source Map正常生成
  检查app.json或app.config.js的Expo配置中是否开启source map：

  "expo": {
    "ios": {
      "sourceMaps": true
    }
  }
  

  没有的话添加该配置，然后重启项目。

• 清理缓存并重置环境

  1. 终端执行npx expo r -c清理Expo缓存
  2. 关闭WebStorm和iOS模拟器，重新打开后再启动项目
  3. 确认Xcode及Command Line Tools版本在14.3以上（兼容SDK49的最低要求）

• 检查断点有效性
  断点要打在你自己编写的业务代码上，别打在node_modules目录下的依赖代码里；同时确认断点所在的代码没有被Tree Shaking优化掉（比如未被引用的函数断点不会触发）。

• WebStorm调试相关设置检查

  1. 打开Preferences > Languages & Frameworks > JavaScript > Debugger，确保Enable source maps已勾选
  2. 进入Preferences > Build, Execution, Deployment > Debugger > Stepping，确认Do not step into library scripts没有误过滤你的业务代码目录

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