使用 Chrome://inspect 調試 Android 和 IOS 上的浏覽器頁面

這一篇是調試兩種裝置上的浏覽器頁面（不是應用中的

Webview

），等我研究明白了怎麼調試應用中的

Webview

會再寫一篇。

Android

參考：使用Chrome://inspect調試 Android 裝置上Webview

注意：

• 調試安卓裝置的浏覽器頁面很簡單，按照參考文章操作沒有遇到什麼問題。
• 可以調試安卓自帶浏覽器和Chrome。

IOS

參考：

• 使用 ios-webkit-debug-proxy 來 debug iOS 上的 Safari
• 使用Chrome DevTool調試iOS裝置的webView
• 使用chrome inspect調試ios safari浏覽器和webview中的頁面 #50

注意：

• 隻可以調試裝置自帶的Safari浏覽器，但是你可以選擇調試工具（Safari 或 Chrome）。
• 需要借助兩個工具（我的電腦是 Mac，以下操作都是在 Mac 上的，其他作業系統的參考官網）：

1. ios-webkit-debug-proxy 在Safari上調試
2. remotedebug-ios-webkit-adapter 在Chrome或VS Code上調試

整理步驟如下：

1. 在Safari上調試
   • 安裝

     brew install ios-webkit-debug-proxy

   • 手機上需要開啟

     設定 -> Safari -> 進階 -> Web 檢查器

   • USB 連接配接電腦和手機，手機上彈出提示選接受
   • 啟動

     ios_webkit_debug_proxy

     （如果這一步出現錯誤提示，往下滑）

     

   • 用手機的 Safari 浏覽器打開 youtube（不要讓手機黑屏）
   • 打開電腦的 Safari 浏覽器 -> 開發 -> 你的手機名稱 -> m.youtubi.com

     

   • 點選之後可以看到如下網頁檢查器，用檢查器選擇元素可以看到手機上有相應的藍色蒙層

     

     第 6 步也可以直接在浏覽器位址欄輸入

     localhost:9221

     進行調試，這個端口和上面啟動指令的端口要一緻。

     

     運作啟動指令

     ios_webkit_debug_proxy

     的時候可能會報如下錯誤，按照這個方法解決下 ERROR: Could not connect to lockdownd, error code -X或在 issue 裡搜一下錯誤。

     報錯：

     Listing devices on :9221 Could not connect to lockdownd, error code -XX. Exiting. Unable to attach xxx inspector

2. 在Chrome或VS Code上調試
   • 安裝

     remotedebug-ios-webkit-adapter

     之前先要安裝

     ios-webkit-debug-proxy

     和

     libimobiledevice

     brew update
     brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd
     brew uninstall --force libimobiledevice ios-webkit-debug-proxy usbmuxd
     brew install --HEAD usbmuxd
     brew install --HEAD libimobiledevice
     brew install --HEAD ios-webkit-debug-proxy
                

   • 安裝

     npm install remotedebug-ios-webkit-adapter -g

   • 手機同樣需要開啟 Web 檢查器，USB 連接配接電腦
   • 啟動

     remotedebug_ios_webkit_adapter

     或

     remotedebug_ios_webkit_adapter --port=9000

     （預設是9000端口，你也可以自己指定端口）

     

     上圖中的

     error

     提示的是裝置版本不比對，正常是沒有的額，但這個不影響調試。
   • 谷歌浏覽器打開 chrome://inspect/#devices -> Configure -> 配置上一步指定的端口

     localhost:9000

     -> Done

     

   • 配置完成之後就可以看到我們手機中打開的頁面了，點

     inspect

     就可以進行調試了

     

     

以上。