iPhoneやiPad(以下、iOSデバイス)を持っているなら、Macを持っていなくても、WindowsからSafariで開いたページのデバッグができる。その方法を書いていく。
検証環境
- Windows10
- iOS13
手順
-
iOSデバイスのSafariのWebインスペクタを有効化する。設定->Safari->詳細
-
WindowsPCにiTunesをインストール。Store版ではなく従来のソフト版をダウンロードする。
-
ios-webkit-debug-proxyやremotedebug-ios-webkit-adapterをインストールするためにscoopをインストール
scoopとは、簡単に例えると、Homebrew、apt-get、yumなどのWindows版だ。
WindowsでPowerShellを開き以下のコマンドを実行するとscoopがインストールされる。
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force iwr -useb get.scoop.sh | iex
インストールできたらscoopからgitをインストールする
scoop install git
scoopにextras bucketを追加して、様々なアプリをインストールできるようにする。
scoop bucket add extras
-
scoopからios-webkit-debug-proxyをインストール
scoop install ios-webkit-debug-proxy
-
iOSデバイスをPCに繋ぎ、iTunesを開き、「このコンピュータを信頼する」
-
remotedebug_ios_webkit_adapterを起動
remotedebug_ios_webkit_adapter --port=9000
-
Chromeを開き、アドレスバーに chrome://inspect/#devices と入力
Configureをクリックし、Target discovery settingsにlocalhost:9000を追加
-
Safariでデバッグしたいページを開くとchrome://inspect/#devicesのRemote TargetにそのページのURLが表示されるのでinspectをクリック。するとDevToolsが立ち上がってそこからデバッグできる。
scoopからnodejsをインストール
scoop install nodejs
npmからremotedebug-ios-webkit-adapterをインストール
npm install remotedebug-ios-webkit-adapter -g
関連