移動應用調試之 Inspect


移動端開發時,我們常使用chrome自帶的模擬器,模擬各種手機設備。 但模擬畢竟是模擬,當開發完畢,使用真機訪問頁面出現問題時如何調試呢?

下面介紹2種針對android機的調試方法

 一.直接使用Chrome瀏覽器:

1.在瀏覽器中輸入待調試的site,F12打開調試窗口;

2.根據需要選擇不同類型設備進行調試;

 

二.使用手機真機調試:

1. 在pc和android手機上都安裝最新版本的chrome;
2. 使用usb將手機的PC相連接;
3. 手機中打開“設置”->"開發人員選項"->"USB調試"

 



4. 打開pc側chrome, 在地址欄中輸入chrome://inspect/#devices 選中discover usb devices。可以看到我們的手機設備,如下圖所示:

 



5.在手機側chrome中訪問頁面. 比如:https://test.lifeccp.com/m/ 同步的,我們會在pc側的chrome上看到到手機側訪問的頁面,如下圖所示

 

 



6. 點擊上圖中的inspect, 熟悉的調試界面出現!

 


在調試窗口中選擇 More tools --> Inpect devices...


在下面頁面打開 Inspect:

 

注意圖中右上角的手機圖標,點擊后,PC和手機的顯示內容相同。手機打開的頁面被直接拉到pc上顯示了。調試更加事半功倍!


想了解更多信息,可以參考Chrome官方幫助:https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM