Web頁面Android安卓真機調試

 

如果是前端開發手機頁面，通常會需要在手機運行本地代碼，檢查頁面佈局和顯示，同時需要在chrome瀏覽器控制檯進行調試。在這裏記錄一下安卓機web頁面，手機運行，pc調試的操作方法。主要用到的是chrome的remote DevTools。

 

主要步驟：

一．運行本機代碼的調試

1. 手機下載chrome瀏覽器；
2. 在手機上的chrome瀏覽器訪問本地代碼（在url地址欄輸入電腦ip+端口，例：10.X.XXX.XXX:8080；如vue代碼在本地訪問地址爲       localhost：8080，則將localhost替換爲本機ip（在設置-網絡-屬性中可以查看IPv4的地址）即可）；
3. 在手機設置中打開開發者模式；
4. 用usb線連接手機和電腦；
5. 手機上會彈出是否信任此電腦設備的確認彈框，選擇信任；
6. 在電腦上打開谷歌瀏覽器，訪問chrome://inspect，手機上顯示本地頁面，就可以看到Remote Target下會顯示連接成功的手機和手機上chrome訪問了的網頁列表。

找到需要調試的網頁，點擊下面的inspect，則調試頁面會在一個新的chrome窗口打開。左邊和真機屏幕同步顯示，右邊是我們熟悉的調試臺。

注意：

•        手機和電腦要在一個網絡內；
•        需關閉電腦防火牆；

 

二．手機運行電腦虛擬機代碼的調試

當我們的項目前後端不分離時，代碼可能運行在虛擬機上。

當手機訪問運行在虛擬機上的代碼時，則需要做端口映射。

步驟：

1. 和上面一樣，手機下好chrome，打開開發者模式，插上usb線。
2. 電腦端打開chrome://inspect頁面，在chrome://inspect上部我們可以看到一個Port forwarding的選項：
3. 點開Port forwarding，在左邊輸入手機訪問電腦時你想設置的端口，在右邊輸入虛擬機ip（虛擬機防火牆也需關閉，我這裏是php laravel框架推薦的homestead的ip），記得勾選左下角Enable port forwarding；
4. 手機瀏覽器裏訪問則無需輸入電腦ip，直接輸入localhost+端口號即可。