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

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

Vscode插件地址：ADB Interface for VSCode

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

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

首先在vscode插件市場(chǎng)搜索 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

步驟：
首先將你的手機(jī)與電腦通過數(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并輸入你手機(jī)的局域網(wǎng)ip，如<192.168.0.3>進(jìn)行連接，然后可以看到vscode 右下角會(huì)有個(gè)連接成功的提示
就表示遠(yuǎn)程連接成功，此時(shí)就可以拔掉數(shù)據(jù)線了。

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

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

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

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

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

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

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

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

晃動(dòng)手機(jī)打開開發(fā)者菜單

選擇Settings，

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

總結(jié)

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

最新評(píng)論