当刚接手 RN 项目时, 调试是一个问题.

通过 yarn android 启动时, 用 react native debugger 进行调试

• 可发送全局命令
• 监听 redux 的 store 变化
• 获取 视图树

安装

# extras bucket 中
scoop install react-native-debugger

没发现怎么打断点, 使用 vscode 中的 react native tools 插件即可 debug

名称: React Native Tools ID: msjsdiag.vscode-react-native 说明: Debugging and integrated commands for React Native 版本: 1.9.2 发布者: Microsoft VS Marketplace 链接: marketplace.visualstudio.com/items?itemN…

安装之后,添加运行与调试的指令即可运行

 {
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "android",
      "sourceMaps": true
    }
  ]
}

点击运行 可在JavaScript 上打断点了

当然常常会用到 原生能力, 通过 android studio 对 Java 等 打断点

首先通过 android studio 打开当前 rn 的 android 目录.(会加载和索引一段时间)

然后通过 attach debugger to android process 即可在程序上打断点了

并且也可以在安卓程序上直接修改刷新后即可使用新的代码.不需要重新编译打包.