桌面版 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 的網頁：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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