banner
MoLeft

MoLeft's xLog

Hey! Welcome to my Xlog. The no blackchains on https://www.moleft.cn
github
email

在Windows上調試iPhone/iPad的Safari瀏覽器

众所周知#

在安卓上面可以使用 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,或者直接裝個愛思助手也行。

image

接著在你的 PowerShell 裡面啟動remotedebug_ios_webkit_adapter

remotedebug_ios_webkit_adapter --port=9000

之後打開你的 Chrome 瀏覽器 (如果沒有的話 Edge 也是平替),輸入網址chrome://inspect/#devices(如果是 Edge 則是edge://inspect/#devices),點Configure...,輸入localhost:9000就完成了。

image

這時候在你的 safari 瀏覽器裡面打開你要調試的網頁,就能在 Remote Target 中看到了,剩下的就不用我多說了吧。

image

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。