移動應用調試之 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