banner
MoLeft

MoLeft's xLog

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

WindowsでiPhone/iPadのSafariブラウザをデバッグする

众所周知#

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 をインストールしてください。

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

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。