筆者前段時間在做react-native開發，一直是有線連線安卓真機進行除錯的。有線除錯確實帶來諸多麻煩，因為在除錯過程中需要頻繁和手機進行互動，導致有時候資料線脫落，就不得不重新安裝debug apk，安裝一次應用的時間大概在一到三分鐘，大量的誤觸就使得花在安裝應用花費的時間比較長。這幾天在研究flutter，就上網搜了一下vscode 開發 flutter開啟無線除錯。然後順藤摸瓜，把react-native的無線除錯也試了一下。

參考文章：vscode通過wifi除錯真機的Flutter應用

Vscode外掛地址：ADB Interface for VSCode

下面先介紹flutter如何開啟安卓無線除錯：

因為在開發react-native的時候已經裝過了Android Studio 和 sdk，就直接跳過adb環境變數的配置，初次接觸的可以點選上方的參考文章。

首先在vscode外掛市場搜尋 ADB Interface for VSCode並安裝(install)

steps：
First connect your device trough USB
Run ADB:📱 Disconnect from any devices
And run ADB:📱 Reset connected devices port to :5555
And Then ADB:📱 Connect to device IP enter your device (settings > status > ip address) IP address and be fine

步驟：
首先將你的手機與電腦通過資料線連線上；
然後開啟命令面板(Ctrl + Shift + P)，查詢命令 ADB:📱 Disconnect from any devices並執行；
繼續執行命令 ADB:📱 Reset connected devices port to :5555；
最後執行命令 Connect to device IP enter your device並輸入你手機的區域網ip，如<192.168.0.3>進行連線，然後可以看到vscode 右下角會有個連線成功的提示
就表示遠端連線成功，此時就可以拔掉資料線了。

然後就可以執行flutter run命令，進行無線除錯，或者按住Fn + F5 進入debug模式，儲存自動重新整理，再也沒有資料線干擾了，是不是美滋滋…

vscode外掛市場有很多關於adb的外掛，大家可以試試看其他的外掛的易用性。

React-Native 無線除錯教程：

首先基本步驟跟flutter一樣，在無線連線成功後拔掉資料線，執行 yarn run android（react-native run-android）=> 具體看package.json檔案的啟動配置。安裝好開啟後會出現

不要慌，問題不大，這表明debug apk已經安裝上了，只是載入不了指令碼，所以要在電腦上執行指令碼伺服器，讓安卓從電腦的埠動態獲取指令碼並執行（也就是hot reload熱更新）

在vscode終端執行 yarn start(或者react-native start)預設埠是8081，如果埠被佔用可以在命令後加入 --port=指定的埠號 如react-native start --port=7999 在指定的埠執行，然後在瀏覽器中開啟該埠地址

在vscode控制檯也可以看到訪問日誌和除錯日誌

表示server正在執行，電腦端配置完畢，現在配置手機的debug setting 讓手機連線到電腦的這個埠獲取指令碼。

晃動手機開啟開發者選單

選擇Settings，

開啟 Debug server host & port for device
輸入 server地址 192.168.0.2.7999
然後晃動手機點選reload，或者退出應用重新進，就發現app執行成功了，日誌輸出在vscode的控制檯上面。

總結

到此這篇關於VS Code開發React-Native及Flutter 開啟無線區域網安卓真機除錯問題的文章就介紹到這了,更多相關VS Code React-Native Flutter 無線區域網內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！