Windows Chrome Remote Debug 彙整 – PC、Android、iOS 除錯

Introduction

身為前端工程師,前端的 bug 解多了,開發人員工具肯定是熟練,但往往只知道在 PC 上面 debug, 即便現在 RWD 已經是很常見的設計了,但還是很容易遇到在 PC 上妥妥的,但放到手機上就開始群魔亂舞,這時候真的得學學「在各種環境」使用 Chrome Remote Debug。

Outline

  1. 在 PC 上 debug
  2. 在 Android 上 debug
    1. Android 的 Chrome 瀏覽器
    2. Android 的 App Embedded Webview (嵌入在 app 內的網頁)
  3. 在 iOS 上 debug

PC Chrome Debug

在 PC 上面是最簡單的:右上角功能鈕 => 更多工具 => 開發人員工具

電腦 Chrome 對 Android Debug

Android 的 Chrome 瀏覽器

這篇中文官方文章有很詳盡的解釋(因為 Google 自家的),這邊簡述一下懶人版:

  1. 手機:啟用開發者選項(啟用過一次即可)
  2. 手機:用 Chrome 打開到需要 debug 的頁面
  3. 手機:與電腦用 USB 線連接
  4. 手機:若跳出「是否信任此電腦」之類的詢問,按「是」
  5. 電腦:打開 Chrome,在網址輸入 chrome://inspect/#devices
  6. 電腦:確定有勾選 Discover USB devices,並重新整理
  7. 電腦:下方 Remote Target 的區塊應該會出現你的手機裝置名稱,對需要 debug 的頁面按下 inspectchrome-inspect
  8. 電腦:理論上會另開視窗,可以看到手機畫面出現在電腦的螢幕上,大功告成!

Android 的 App Embedded Webview

但如果今天我們是將開發好的網頁,塞到 Android app webview 內,然後希望能夠對它 debug 的話,這篇中文官方文章也很詳盡,但其實跟上面那種方法比起來,只要打開 Android 的 java code,在 webview 類上加以下這段程式:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

加完之後把 App 重新裝進手機後,其他步驟同上八步驟,但記得步驟二要改成:打開你的 App 到 webview 的頁面。 

電腦 Chrome 對 iOS Debug

Apple 電腦要對 iOS device debug 超簡單,可以參考這篇文章,只要線接上去,Safari 打開,debug 開下去就天下太平。但如果是 Windows,因為 Apple 跟 Google 就是一個打對台的關係,所以用 Chrome 要對 iPad、iPhone debug 真的是花了我超多時間,所幸還是有高人寫出了 npm 套件,但因為是英文,所以附上簡單懶人版步驟:

  1. 電腦:安裝 iTunes
  2. 電腦:安裝 NodeJS
  3. 電腦:開啟命令提示字元(window + R → “cmd” → 確定)
  4. 電腦:輸入npm install remotedebug-ios-webkit-adapter -g
  5. 電腦:安裝完成後,輸入remotedebug_ios_webkit_adapter –port=9000cmd
  6. 電腦:打開 Chrome,在網址輸入chrome://inspect/#devices
  7. 電腦:確定有勾選 Discover USB devices,點 Configure… 新增一筆 localhost:9000configure
  8. 手機:Safari 打開網頁檢閱器(設定 → Safari → 進階 → 勾選「網頁檢閱器」)iOS Safari inspect
  9. 手機:開啟 Safari 到需要 debug 的頁面(如果是 embedded webview 也可以)
  10. 手機:與電腦用 USB 線連接
  11. 手機:若跳出「是否信任此電腦」之類的詢問,按「是」
  12. 電腦:下方 Remote Target 的區塊應該會出現你的手機裝置名稱,對需要 debug 的頁面按下 inspect
  13. 電腦:理論上會另開視窗,可以看到手機畫面出現在電腦的螢幕上,大功告成!

Troubleshooting

  • Q:我接上 USB 之後,按下 inspect,為什麼另開出來的視窗是一片空白?
  • A:如果只有接公司內網會發生,需確認網際網路有正常連接。
  • Q:我要 debug iOS,為什麼 Remote Target 的區塊一直沒有我的頁面?
  • A:如果手機是 iOS 10以上(查詢版本參考這篇),有額外的步驟,可以參考 issue comment
  • Q:為什麼 Remote Target 的區塊一直沒有我的頁面?
  • A:我已經被困在「Remote Target 沒有頁面」很多次了,發生原因不容易發現,只能多翻翻幾篇文章,按照別人的步驟試著走走看,看有沒有少了什麼步驟,或者留個言告訴我吧!

Reference

Google Chrome 官方 Debug Android Chrome 文件
Google Chrome 官方 Debug Android Webview 文件
NPM套件:ios-webkit-debug-proxy
利用 Chrome 對 iOS 裝置進行除錯(iPhone、iPad)的絕佳方案
iOS Remote Debug

Note

這篇文章真的是半年來,踩過各種坑的集合體,因為本身的工作產品不只出現在 PC 瀏覽器、手機瀏覽器,甚至還出現在手機 webview,環境之多,每個環境開啟 Chrome debug tool 都各有奧妙,雖然我已經盡量整理了,不過可能還是會有人卡在某些坑,歡迎留言看大家有沒有好解法!

留個言吧!