使用Safari或者Chrome遠程調試IOS Safari中的頁面

【轉載請註明出處】：https://blog.csdn.net/huahao1989/article/details/108020899

1 使用Safari瀏覽器調試

1.1 打開Mac的 Safari 瀏覽器的“開發”菜單

運行 Safari 瀏覽器，然後依次選取“Safari 瀏覽器”>“偏好設置”，點按“高級”面板，然後勾選“在菜單欄中顯示開發菜單”。

1.2 開啟IPhone的Safari調試模式

啟用 Web 檢查功能，打開 iPhone 依次進入設置 > Safari瀏覽器 > 高級 > 網頁檢查器 > 啟用。

1.3 調試步驟

先用IPhone 的Safari打開要調試的頁面，然後將IPhone連到Mac上，打開Mac的Safari瀏覽器，在“開發”菜單中選擇連接的手機，找到調試的網頁，就能調試了。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-R87pDPaA-1597465930291)(https://upload-images.jianshu.io/upload_images/9344364-b99b80eca1389ab3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
上面這個圖是我打開的3g.163.com的頁面，接下來就可以使用元素、網絡等，配合斷點來調試頁面了。

2 使用Chrome瀏覽器調試

先將IPhone手機連上電腦進行下面的操作。

2.1 安裝部署ios-webkit-debug-proxy

在Mac終端中輸入如下命令直接使用brew安裝，等安裝完成之後啟動proxy。

brew install ios-webkit-debug-proxy
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

過程中遇到的問題
執行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html時報錯

Listing devices on :9221
Could not connect to lockdownd, error code -21. Exiting.

Unable to attach 8cceb9fa5b75c633c39a51c0d2f03980fadd9c5d inspector

開始因為權限不夠，加 sudo 再次執行，還是報錯

Listing devices on :9221

Could not connect to lockdownd, error code -3. Exiting.
Unable to attach 8cceb9fa5b75c633c39a51c0d2f03980fadd9c5d inspector

其實根本不是權限的事，需要重新安裝以下安裝包

brew update
brew reinstall libimobiledevice
brew reinstall -s ios-webkit-debug-proxy

重新執行命令，這下連接成功了，如果還是不成功，請參考https://github.com/libimobiledevice/libimobiledevice/issues/717
連接成功如圖所示

2.2 調試步驟

在Mac 的Chrome中打開 localhost:9221 ，可以看到當前已連接的設備列表，找到設備然後點擊進去。

這時候可以看到還沒打開任何頁面，用手機瀏覽器打開網頁之後再刷新這個頁面

右上角打開開發者工具，然後再打開Remote devices面板

直接點擊下面的鏈接打開設備接口面板

這時候在Remote Target 就可以看到手機上打開的頁面，點擊inspect打開

滿懷期待，結果是白屏，啥也看不見，後來仔細看了ios-webkit-debug-proxy的文檔，這裡面有這麼一段話

原因就是最新版本的Chrome遠程調試協議和蘋果的遠程Web檢查服務存在重大差異，不兼容了，建議使用remotedebug-ios-webkit-adapter工程。
其實老版本的在打開localhost:9221頁面看到手機上打開的頁面之後可以直接右鍵，在新的標籤頁直接開始調試。既然新版不支持，那就按照官方的建議繼續搞吧。

Round Two ！！！
依然是安裝依賴包

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

安裝完成之後啟動adapter

remotedebug_ios_webkit_adapter --port=9000

在Chrome中打開 chrome://inspect 頁面，然後按照下圖添加適配器的地址就可以看到手機上打開的頁面了。

點擊inspect打開之後依然白屏，一波三折啊，後來參考https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/181

執行下面的命令

npm i -g remotedebug-ios-webkit-adapter@next
npm update remotedebug-ios-webkit-adapter -g
remotedebug_ios_webkit_adapter --port=9000

adapter起來之後再次打開頁面

熟悉的畫面終於出來了，可以調試了。

歡迎關注 “後端老鳥” 公眾號，接下來會發一系列的專題文章，包括Java、Python、Linux、SpringBoot、SpringCloud、Dubbo、算法、技術團隊的管理等，還有各種腦圖和學習資料，NFC技術、搜索技術、爬蟲技術、推薦技術、音視頻互動直播等，只要有時間我就會整理分享，敬請期待，現成的筆記、腦圖和學習資料如果大家有需求也可以公眾號留言提前獲取。由於本人在所有團隊中基本都處於攻堅和探路的角色，搞過的東西多，遇到的坑多，解決的問題也很多，歡迎大家加公眾號進群一起交流學習。