先放個原版教程鏈接，請戳這裏 https://github.com/RemoteDebu…
使用chrome devtools 調試 iphone 頁面，需安裝 remotedebug-ios-webkit-adapter 工具。
這個 adapter 可牛批壞了，可以通過VS Code，Chrome DevTools，Mozilla Debugger.html和其他與Chrome調試協議兼容的工具調試iOS上的Safari和WebViews。
且看以下具體步驟。
開始
在使用此適配器之前，您需要確保安裝了最新版本的iTunes，因爲我們需要iTunes提供的一些庫來與iOS設備通信。
安裝依賴項
1、安裝scoop（windows的包管理工具）
#修改執行策略，選擇是 or 全是
set-executionpolicy unrestricted -s cu
#安裝scoop
iex (new-object net.webclient).downloadstring(‘https://get.scoop.sh’)
2、通過scoop安裝 ios_webkit_debug_proxy
scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile
3、安裝最新版本的 remotedebug-ios-webkit-adapter
npm install remotedebug-ios-webkit-adapter -g
4、在Safari中啓用遠程調試
爲了顯示您的iOS設備，您需要啓用啓用開發者模式進行調試。
Iphone => 設置 => Safari 瀏覽器 => 高級 => web檢查器 => 啓用
5、讓您的計算機信任您的iOS設備
將Iphone手機連接電腦，必須點擊“信任”，並打開 itunes, 以確保手機連接。
6、打開你喜歡的命令行工具，運行以下命令：
remotedebug_ios_webkit_adapter --port=9000
#ios-webkit-debug-proxy 將自動爲您運行 無需單獨啓動
clipboard.png
7、 打開chrome, 輸入網址： chrome://inspect/#devices
如下圖所示，點擊 inspect, 即可調試。
clipboard.png
恭喜你，現在可以愉快的調試網頁了
clipboard.png
以下是iphone上看到的效果：
指哪打哪，簡直不要太牛批
clipboard.png
PS：請多多指正！別忘記點個贊喲~ 並回敬您一個猿式的微笑。 😃
用Chrome devTools 調試Android手機app中的web頁面
(1) 手機要滿足Android系統爲4.4或更高版本，低版本不支持這種方式。
(2) 確保App已經開啓了webview的debug調試模式，由Android工程師協助。
(2) 用usb數據線連接好手機與電腦。
(3) 將手機中的 設置 - 開發人員工具 - USB調試功能打開。
(4) 打開chrome://inspect/#devices，即單擊chrome右上角控制按鈕 - 更多工具 - 檢查設備 - 勾選上 Discover USB devices
(5) 在app中訪問一個web頁面,對應的webview就可以出現在devices中，單擊inspect即可調試。