likes
comments
collection
share

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.

作者站长头像
站长
· 阅读数 10

记录于 20220905

react-native run-android 启动项目

# script
npm run android
# 等同于 
react-native run-android

他将打开两个进程 一个是rn 的 jsbundle 子进程 一个是rn 的 安卓 安装主进程

如果出现wait for debugger 很可能是子进程挂了,重启一下就成.

这样我们项目便安装成功启动了

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.

vscode powershell 命令行失败时可能显示中文乱码

解决方法1: 那么只需要使用 android studio build 即可正常显示中文

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.

android studio 中中文将正常显示

大一统调试工具 react-native-debugger

包括了 视图 state 以及控制台的作用 是一个大一统的调试工具 但是没看到如何断点

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.

# 安装(scoop)
scoop install react-native-debugger

调试 js 部分

调试 js 部分需要额外的设置,比如 我常用 vscode, 那么最简单的方式便是在 npm run android 启动项目之后 attach to packager 就可以打断点了.

# attch to package 配置
{
  "name": "Attach to packager", 
  "request": "attach", 
  "type": "reactnative", 
  "cwd": "${workspaceFolder}" 
},
  

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.

PS: 这里是旧项目所以不是 hermes 引擎,其中有一些区别,直接选择 react-native 的其他调试配置选项即可.

PS: 个人觉得 npm run android 与 attach 分开 对比 debug android 是比较好的做法,一来命令行运行 run-android 的显示比 output 清楚(有颜色), 二来可以更好的使用rn 调试子进程的 reload 和 debug 选项(按 R 和 D 键即可) ,并且可以脱离独自重启某个部分的命令,便于使用不同工具进行调试.

调试安卓部分

与原生进行沟通必不可少需要借助安卓原生的力量,而通常他们只是提供个包 出问题你还得看日志和调, 但是联调总是相对低效的,如果你遇到的问题不复杂或者你有用原生能力,那么你可以自己debug 进入安卓调试

调试安卓的方法如下

使用 android studio 或者 idea 打开 项目中的安卓文件夹.

连接进程

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.' 选择自己的进程名称

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.

安卓通常会等待进度条 摸鱼就完事了

windows 系统使用 vscode 对于 react native (安卓)调试的一点记录.

便可以调试了~

调试同所有 JetBrains 家 的调试 打断点~

转载自:https://juejin.cn/post/7139782029733789704
评论
请登录