使用VSCode開發(fā)React Native進行開發(fā)時。他的插件React Native Tools會有一個很好用的代碼調(diào)試功能。可以像Android Studio 和Xcode一樣進行斷點調(diào)試。

一、安裝插件

打開React Native工程后

image.png

點擊左側(cè)菜單欄最下面一個按鈕，安裝React Native Tools插件

然后選擇Debug標志，添加React native配置

image.png

1.安卓調(diào)試

如果是新項目，調(diào)試安卓需要打開Android Studio，等待項目初始化，然后打開一個模擬器后，選擇Debug Android
按綠色按鈕即可開始Debug。注意，模擬器沒有打開或者電腦沒有連接測試手機且adb接口沒有監(jiān)聽的情況下，無法Debug成功。基本上是命令行運行react-native run android成功即可debug

image.png

2.iOS調(diào)試

方法與android 基本相同

3.iOS真機斷點調(diào)試

如果要使用真機進行調(diào)試或者修改模擬器的類型。可以通過配置launch.json參數(shù)來解決
在工程目錄下${workspaceRoot}/.vscode/launch.json中添加或者修改配置
比如使用真機的可以添加一下參數(shù)

{
            "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的時候，先要關閉網(wǎng)頁的Debug。否則會提示
Could not debug. Another debugger is already connected to packager. Please close it before trying to debug with VSCode.

這時候，在行內(nèi)打印斷點，可以在下面的控制臺查看變量進行調(diào)試，也可以用最上面的菜單欄控制Debug的步揍

image.png