[Android] 使用桌面版的 Chrome debug 手機上的網頁

[Android] 使用桌面版的 Chrome debug 手機上的網頁

桌面版 Chrome 的 developer tool 很好用,要 debug 自己寫的網頁,

或是 web application 都靠它,

不過有時候網頁在手機上的行為跟電腦上看到的不太一樣,

在手機上又沒有 Chrome 的 developer tool,怎麼辦呢?

 

當然一種比較簡單的方法,是透過修改 User-Agent 的方式,

假裝成是手機上的瀏覽器,來取得給手機用的網頁~

不過這種方法有時會破功,因為網頁可能會參考螢幕的大小,

來決定現在是不是要提供手機版的網頁…

 

這也不是完全不能解決,使用像 Responsive Web Design Tester 這樣的擴充功能,

就能把視窗大小也模擬成手機上解析度大小,也是個好方法~

但是,如果手機版的行為和這樣模擬出來的還是不一樣呢?

這時就只好直接在手機上 debug 了~

Chrome 提供了 Remote Debugging Devices 的功能,

方便我們使用桌面版的 Chrome 連線到手機上做 debug~

 

下面為了操作方便,是以 Android 模擬器為例,

也可以使用實體手機來操作,只是要記得打開 USB debugging~

 

1. 確認電腦可以使用 adb 連線至手機

手機的話要接 USB 線且打開 USB debugging 的功能,

模擬器的話就不用了,這時執行 adb devices 確認電腦有連線到手機/模擬器:

testuser@localhost ~ $ adb devices
List of devices attached
emulator-5554   device

 

2. 使用桌面版 Chrome 連線至手機

先開啟模擬器上的瀏覽器,瀏覽至要 debug 的網頁:

Screen Shot 2015-09-08 at 7.39.59 AM   

 

這時打開桌面版的 Chrome,瀏覽至 chrome://inspect/#devices

這邊會列出來目前已連線的手機上的 web view session~

(有時候即使手機上目前是顯示桌面,但只要那個瀏覽器還在背景執行,

這邊就還是可以看到那個 web view)

Screen Shot 2015-09-08 at 7.42.17 AM  

 

這時點下 inspect 連結,就可以看到平常 developer tool 的畫面,

不過這時 debug 的是手機/模擬器上的 web view 囉:

Screen Shot 2015-09-08 at 7.45.15 AM    

 

按下左上角的小小手機圖示,還可以進一步地看到手機上的畫面~

如果這時再按下那個放大鏡的圖示,就可以像平常 developer tool 一樣檢視網頁元素了~

不過開啟手機畫面的話,整個會變很頓,

網頁的原始碼一開始內容有點空,會慢慢的跑出來,蠻考驗耐心的…

Screen Shot 2015-09-08 at 7.49.04 AM  

 

這個技巧可以運用在內含 web view 的手機 app 上~

像我的 圖書館多重帳戶登入 app 是用 Cordova 寫的,因此裡面也內含一個 web view,

在模擬器上把 app 跑起來之後,用同樣的方式,

也可以在 chrome://inspect/#devices 看到這個 web view:

Screen Shot 2015-09-08 at 8.26.38 AM

 

點選 inspect 之後,一樣可以檢視這個 app 裡面 web view 的內容,蠻方便的:

Screen Shot 2015-09-08 at 8.27.26 AM  

 

使用這個方法,就可以檢視手機上的網頁元素,

是不是有依照自己設計預想的運作囉~

(當然也可以拿來偷看別人的網頁是怎麼寫的啦 :P)

 

(本頁面已被瀏覽過 2,709 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料