做react-native的人很多都是web端转过来的,web端习惯于用chrome 进行调试,对于react-navite chrome调试方式其实效率很低、而且很容易就卡主,还是不如直接在代码里面查看上下文信息来的舒服。
对于做原生开发出身的,能直接在vscode里面直接调试打个断点就能调试是非常爽的事情、而且效能也会高很多,chrome调试时长就会出现等待半天的情况。
下面进入正题
1、创建vscode 调试脚本文件【launch.json】
添加react-native调试脚本,创建launch.json文件
create a launch.json file

选择Attach to package

至于其他的可选,【Debug Android】【Debug iOS】主要是用于启动App,我习惯于在xcode和Android 里面直接启动App,因为要快一些。

然后点击绿色启动按钮启动
如果在chrome里面开了debug 记得把chrome 的debug关掉
2、运行App
在Android studio或者xcode里面直接把项目跑起来,
App开启debug模式

然后可以可以看到vscode调试控制台输出连接App成功

之前chrome的console就会出现到vscode的控制台

3、断点调试


把鼠标放到断点处之前变量参数,就可以看到运行时的参数了,
再也不用添加debugger了
网友评论