使用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 再次執行，還是報錯

Could not connect to lockdownd, error code -3. Exiting.

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

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技術、搜尋技術、爬蟲技術、推薦技術、音視訊互動直播等，隻要有時間我就會整理分享，敬請期待，現成的筆記、腦圖和學習資料如果大家有需求也可以公衆号留言提前擷取。由于本人在所有團隊中基本都處于攻堅和探路的角色，搞過的東西多，遇到的坑多，解決的問題也很多，歡迎大家加公衆号進群一起交流學習。