使用VSCode开发React Native进行开发时。他的插件React Native Tools会有一个很好用的代码调试功能。可以像Android Studio 和Xcode一样进行断点调试。

一、安装插件

打开React Native工程后

image.png

点击左侧菜单栏最下面一个按钮，安装React Native Tools插件

然后选择Debug标志，添加React native配置

image.png

1.安卓调试

如果是新项目，调试安卓需要打开Android Studio，等待项目初始化，然后打开一个模拟器后，选择Debug Android
按绿色按钮即可开始Debug。注意，模拟器没有打开或者电脑没有连接测试手机且adb接口没有监听的情况下，无法Debug成功。基本上是命令行运行react-native run android成功即可debug

image.png

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的步揍

image.png