Android

參考：使用Chrome://inspect調試 Android 設備上Webview

注意：

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

IOS

參考：

注意：

只可以調試設備自帶的Safari瀏覽器，但是你可以選擇調試工具（Safari 或 Chrome）。
需要藉助兩個工具（我的電腦是 Mac，以下操作都是在 Mac 上的，其他操作系統的參考官網）：

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

整理步驟如下：

在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
在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 就可以進行調試了