react-native调试之 vscode调试

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

下面进入正题

1、创建vscode 调试脚本文件【launch.json】

添加react-native调试脚本，创建launch.json文件

create a launch.json file

点击create a launch.json file

选择Attach to package

选择Attach to packager
至于其他的可选，【Debug Android】【Debug iOS】主要是用于启动App，我习惯于在xcode和Android 里面直接启动App，因为要快一些。 创建好之后的显示

然后点击绿色启动按钮启动
如果在chrome里面开了debug 记得把chrome 的debug关掉

2、运行App

在Android studio或者xcode里面直接把项目跑起来，
App开启debug模式

image.png

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

image.png

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

image.png

3、断点调试

添加断点 调试信息

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