主題:Remote debug Android devices
在架設網站時, 網站維護人員或多或少都會遇過在模擬畫面上是正常的, 在Windows Chrome DevTools的環境下可以模擬Desktop/Tablet/Phone, 但在實機上時, 有時會有一些落差, 所以利用此篇文章內容來直接在有問題的裝置上做debug. 這裡以Android手機來示範.
Windows環境設定
在Android的系統中, 當遇到問題需要解決時, 需透過Platform-tools中的程式去做連結. 點選之後, 挑選合適的版本即可. 下方會再提及如何透過此程式做手機與電腦的連結.
手機環境設定
需開啟手機內的[USB偵錯]功能, 各家手機的設定路徑皆不同, 可以到這裡做簡易的參考.
下圖所示, 依序操作就可以設定完成.
1.設定 –> 2.系統 –> 3.關於手機 –> 4.軟體資訊 –> 5.版本號碼(此項目上連按約7次), 此時開發人員選項就開啟了.
回到系統的畫面中, 進入[開發人員選項], 然後開啟, 最後啟用[USB偵錯].
電腦與手機裝置連結
再來將USB傳輸線接於手機與電腦之間, 手機會跳出[允許USB偵錯嗎?], 點選確定. 紅色框也可以勾選, 後續再次接上USB傳輸線時,就不會再出現提問了.
回到Windows的環境下, 開啟[終端機]或[命令提示字元]程式, 在platform-tools的路徑下,輸入 ./adb devices, 如果有出現紅色框中的內容, 表示已經完成連線. 第二行device之前的內容不會相同.
Windows Chrome DevTools的使用
在Chrome browser環境內, 輸入chrome://inspect/#devices, 確認紅色框內的選項是有勾選, 等待一下, 最下方就會出現已連接的裝置.
手機上開啟Chrome App, 輸入要偵錯的網址, 在Windows Chrome DevTools就會出現相關內容, 點選紅色框就可以debug了.
手機上的畫面也會同時出現在Windows Chrome DevTools的環境下.
總結:
由於各家手機的解析度不相同, 對有程式基礎的人, 相信也是一個比較困擾的問題產生, 即便在Windows Chrome DevTools下,似乎也可以設定不同的解析度來做問題分析, 但手邊如果有實機反而比較能快速解決問題, 以上僅供參考!
