如何用WebStorm调试React Native 0.70.6应用？能否协同Flipper？

一、React Native 标准调试流程 #

• 启动RN应用：运行npx react-native run-android或npx react-native run-ios（iOS需确保Xcode配置正常）
• 调出开发者菜单：Android按Ctrl+M（Windows/Linux）或Cmd+M（Mac）；iOS模拟器按Cmd+D，真机直接摇设备
• 启用调试模式：在菜单里选「Debug JS Remotely」，默认会开Chrome，但我们要换成WebStorm
• 对接调试工具：根据需求配置WebStorm或Flipper，确保和应用的调试端口连通

二、WebStorm 调试器配置与断点触发 #

1. 创建调试配置 #

• 打开WebStorm，点顶部菜单栏的Run → Edit Configurations
• 左上角点+，选React Native配置项
• 配置面板里填这些：
  • Name：随便起个名，比如「RN Debug」
  • Node interpreter：选本地Node.js路径（一般会自动识别）
  • Working directory：选你的RN项目根目录
  • JavaScript debugger：选WebStorm（别选Chrome）
  • 可选勾选Auto build and run，自动同步代码变更
• 保存配置

2. 连接运行中的应用 #

• 确保RN应用已经在模拟器/真机上跑起来，先关掉Chrome远程调试（之前开过的话，去开发者菜单里关）
• 在WebStorm里点Run → Debug 'RN Debug'（就是你刚才命名的配置）
• 连接成功的话，WebStorm底部会弹出调试控制台，显示连接状态

3. 设置断点并调试 #

• 在WebStorm的JS/TS代码行号左边点一下，就能加红色断点
• 去RN应用里操作对应的功能，代码走到断点时WebStorm会自动暂停，此时可以查看变量、调用栈，用快捷键调试：F7单步进入，F8单步跳过，F9继续执行

连接失败的话，检查应用是否正常运行，端口8081有没有被占用，或者去开发者菜单里确认「Enable Debugging」已经开启

三、WebStorm + Flipper 协同调试（替代Chrome） #

React Native 0.70.6默认集成Flipper，完全可以用WebStorm替代Chrome和Flipper配合，步骤如下：

1. 确保Flipper正常运行 #

• RN项目启动时会自动打开Flipper客户端，也可以手动打开Flipper应用
• 确认Flipper设备列表里能看到你的模拟器/真机，说明已经连上应用

2. 切换到Flipper调试模式 #

• 在RN开发者菜单里，关掉「Debug JS Remotely」，选「Open Debugger in Flipper」（0.70版本默认可能已经是这个选项）
• 此时Flipper的「Debugger」插件会激活，但我们不用它自带的调试器，改用WebStorm

3. WebStorm连接Flipper代理端口 #

• Flipper默认用9090端口作为RN调试代理，所以修改WebStorm的调试配置：
  • 回到Edit Configurations，找到之前的RN配置
  • 在「Additional command line options」里加--port 9090
  • 保存后重启WebStorm调试
• 现在WebStorm会连到Flipper的代理端口，断点调试正常工作，同时你可以在Flipper里用其他插件（比如Network、Logs、Layout Inspector）查看应用状态

如果Flipper没自动连接，检查RN项目的android/app/src/main/java/com/[你的项目名]/MainApplication.java里Flipper集成是否开启（0.70版本默认已开），或者手动点Flipper里的「Refresh」刷新设备列表

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