众所周知#
在安卓上面可以使用 adb 链接电脑,使用 Chrome Inspect 进行调试网页 (QQ / 微信的 x5 内核也可以),但是自從換了 iPhone 之後就沒有這個樂趣了,所以我便開始摸索起來如果使用 Chrome Inspect 來調試 safari 瀏覽器 (因為 iPhone 上面的 QQ / 微信沒有 x5 內核,所以只能調試 safari 了)
準備工作#
- Windows 10/11 - 當然 win 也可以,前提是 PowerShell 版本大於 3
- Scoop - Windows 上面最好用包管理器
- iPhone - 建議 iPhone 14 Pro Max 1TB,如果沒有的話,有 Safari 也行
- 數據線 - 這個不用我多說了吧,得有線連接
安裝環境#
首先打開 Windows 上面的 Powershell,我們需要先裝 Scoop,由於 Scoop 的倉庫在 Github 上面,所以你懂的應該做什麼。
set-executionpolicy remotesigned -scope currentuser
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
如果不出意外,這個時候應該就裝好了,會出現一行小綠字,就像下面這樣。如果是紅字,那就自行 Bing 找原因吧。
Scoop was installed successfully!
由於 Scoop 的倉庫都在 Github 上面訪問很不方便,所以說我們需要將倉庫地址換成國內平台 (Gitee),這樣速度可以起飛。當然,如果你相信你的科學上網的話,也可以不換。
scoop config SCOOP_REPO https://gitee.com/glsnames/scoop-installer
成功的話,會出現下面這樣的提示
'SCOOP_REPO' has been set to 'https://gitee.com/glsnames/scoop-installer'
然後更新一下依賴,就像使用apt-get update
一樣簡單
scoop update
到這,如果不出問題,就已經裝好了 Scoop,接下來就可以去裝遠程調試需要的依賴了,命令也很簡單,就兩行。
scoop bucket add extras
scoop install ios-webkit-debug-proxy
接下來,我們需要一個 Node.js 環境,由於我有這個,相信大部分人也有,所以安裝和換國內源的步驟就不寫了。
直接用 npm 安裝remotedebug-ios-webkit-adapter
就完事了。
npm install remotedebug-ios-webkit-adapter -g
至此,全部的環境,就安裝完畢了。
遠程調試#
打開你的 iPhone 設置,找到Safari瀏覽器
,然後滑到最下面高級
,之後開啟網頁檢查器
,然後使用數據線將 iPhone 連接到電腦,在手機的彈窗中選擇信任該電腦即可,如果沒有提示可能是你沒安裝 iTunes,如果不會裝請自行 Bing,或者直接裝個愛思助手也行。
接著在你的 PowerShell 裡面啟動remotedebug_ios_webkit_adapter
remotedebug_ios_webkit_adapter --port=9000
之後打開你的 Chrome 瀏覽器 (如果沒有的話 Edge 也是平替),輸入網址chrome://inspect/#devices
(如果是 Edge 則是edge://inspect/#devices
),點Configure...
,輸入localhost:9000
就完成了。
這時候在你的 safari 瀏覽器裡面打開你要調試的網頁,就能在 Remote Target 中看到了,剩下的就不用我多說了吧。