众所周知#
Android では、adb を使用してコンピュータに接続し、Chrome Inspect を使用してウェブページをデバッグすることができます(QQ/WeChat の x5 カーネルも可能です)。しかし、iPhone に切り替えてからはこの楽しみがありませんでしたので、Safari ブラウザをデバッグするために Chrome Inspect を使用する方法を探求し始めました(iPhone の QQ/WeChat には 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')
問題がなければ、これでインストールが完了し、以下のような緑色のテキストが表示されるはずです。赤色の場合は、原因を自分で調べてください。
Scoop was installed successfully!
Scoop のリポジトリは GitHub にあるため、アクセスが不便です。そのため、リポジトリのアドレスを国内プラットフォーム(Gitee)に変更する必要があります。これにより、速度が向上します。もちろん、自分の VPN が信頼できる場合は変更しなくても構いません。
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 のインストールが完了しました。次は、リモートデバッグに必要な依存関係をインストールすることができます。コマンドも非常に簡単で、たった 2 行です。
scoop bucket add extras
scoop install ios-webkit-debug-proxy
次に、Node.js の環境が必要です。私はそれを持っているので、ほとんどの人も持っていると思いますので、インストールと国内ソースの変更手順は省略します。remotedebug-ios-webkit-adapter
を npm で直接インストールするだけです。
npm install remotedebug-ios-webkit-adapter -g
これで、すべての環境のインストールが完了しました。
リモートデバッグ#
iPhone の設定を開き、Safariブラウザ
を見つけ、最下部までスクロールし、高度な
を選択し、Webインスペクタ
を有効にします。その後、データケーブルを使用して iPhone をコンピュータに接続し、電話のポップアップでこのコンピュータを信頼するように選択します。表示されない場合は、おそらく iTunes がインストールされていないかもしれません。インストール方法がわからない場合は、自分で調べるか、iTools をインストールしてください。
次に、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 で表示されるようになります。あとは言わずもがなですね。