筆者前段時間在做react-native開發(fā)，一直是有線連接安卓真機進行調(diào)試的。有線調(diào)試確實帶來諸多麻煩，因為在調(diào)試過程中需要頻繁和手機進行交互，導(dǎo)致有時候數(shù)據(jù)線脫落，就不得不重新安裝debug apk，安裝一次應(yīng)用的時間大概在一到三分鐘，大量的誤觸就使得花在安裝應(yīng)用花費的時間比較長。這幾天在研究flutter，就上網(wǎng)搜了一下vscode 開發(fā) flutter開啟無線調(diào)試。然后順藤摸瓜，把react-native的無線調(diào)試也試了一下。

參考文章：vscode通過wifi調(diào)試真機的Flutter應(yīng)用

Vscode插件地址：ADB Interface for VSCode

下面先介紹flutter如何開啟安卓無線調(diào)試：

因為在開發(fā)react-native的時候已經(jīng)裝過了Android Studio 和 sdk，就直接跳過adb環(huán)境變量的配置，初次接觸的可以點擊上方的參考文章。

首先在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

步驟：
首先將你的手機與電腦通過數(shù)據(jù)線連接上；
然后打開命令面板(Ctrl + Shift + P)，查找命令 ADB:📱 Disconnect from any devices并執(zhí)行；
繼續(xù)執(zhí)行命令 ADB:📱 Reset connected devices port to :5555；
最后執(zhí)行命令 Connect to device IP enter your device并輸入你手機的局域網(wǎng)ip，如<192.168.0.3>進行連接，然后可以看到vscode 右下角會有個連接成功的提示
就表示遠程連接成功，此時就可以拔掉數(shù)據(jù)線了。

然后就可以運行flutter run命令，進行無線調(diào)試，或者按住Fn + F5 進入debug模式，保存自動刷新，再也沒有數(shù)據(jù)線干擾了，是不是美滋滋…

vscode插件市場有很多關(guān)于adb的插件，大家可以試試看其他的插件的易用性。

React-Native 無線調(diào)試教程：

首先基本步驟跟flutter一樣，在無線連接成功后拔掉數(shù)據(jù)線，運行 yarn run android（react-native run-android）=> 具體看package.json文件的啟動配置。安裝好打開后會出現(xiàn)

不要慌，問題不大，這表明debug apk已經(jīng)安裝上了，只是加載不了腳本，所以要在電腦上運行腳本服務(wù)器，讓安卓從電腦的端口動態(tài)獲取腳本并執(zhí)行（也就是hot reload熱更新）

在vscode終端運行 yarn start(或者react-native start)默認(rèn)端口是8081，如果端口被占用可以在命令后加入 --port=指定的端口號 如react-native start --port=7999 在指定的端口運行，然后在瀏覽器中打開該端口地址

在vscode控制臺也可以看到訪問日志和調(diào)試日志

表示server正在運行，電腦端配置完畢，現(xiàn)在配置手機的debug setting 讓手機連接到電腦的這個端口獲取腳本。

晃動手機打開開發(fā)者菜單

選擇Settings，

打開 Debug server host & port for device
輸入 server地址 192.168.0.2.7999
然后晃動手機點擊reload，或者退出應(yīng)用重新進，就發(fā)現(xiàn)app運行成功了，日志輸出在vscode的控制臺上面。

總結(jié)

到此這篇關(guān)于VS Code開發(fā)React-Native及Flutter 開啟無線局域網(wǎng)安卓真機調(diào)試問題的文章就介紹到這了,更多相關(guān)VS Code React-Native Flutter 無線局域網(wǎng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論