使用VSCode开发React Native进行开发时。他的插件React Native Tools会有一个很好用的代码调试功能。可以像Android Studio 和Xcode一样进行断点调试。
一、安装插件
打开React Native工程后
点击左侧菜单栏最下面一个按钮，安装React Native Tools插件
然后选择Debug标志，添加React native配置
1.安卓调试
如果是新项目，调试安卓需要打开Android Studio，等待项目初始化，然后打开一个模拟器后，选择Debug Android
按绿色按钮即可开始Debug。注意，模拟器没有打开或者电脑没有连接测试手机且adb接口没有监听的情况下，无法Debug成功。基本上是命令行运行react-native run android成功即可debug
2.iOS调试
方法与android 基本相同
3.iOS真机断点调试
如果要使用真机进行调试或者修改模拟器的类型。可以通过配置launch.json参数来解决
在工程目录下${workspaceRoot}/.vscode/launch.json中添加或者修改配置
比如使用真机的可以添加一下参数
{
"name": "Debug iOS Device",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"target": "device",
"outDir": "${workspaceRoot}/.vscode/.react"
},
关于react native launch.json的配置可以参考此文文档
vscode-react-native
然后运行Debug iOS Device，如果提示失败。可能是因为没有安装ios-deploy 工具，运行brew install ios-deploy即可。(没有brew请先安装)。注意。如果是以前使用node安装的版本可能在Xcode11上编译报错。需要先运行sudo npm uninstall -g ios-deploy卸载后重装。参考ios-deploy
注意使用React Native Tools 进行Debug的时候，先要关闭网页的Debug。否则会提示
Could not debug. Another debugger is already connected to packager. Please close it before trying to debug with VSCode.
这时候，在行内打印断点，可以在下面的控制台查看变量进行调试，也可以用最上面的菜单栏控制Debug的步揍
