WindowsでiOSのSafariで開いたページをデバッグする

iPhoneやiPad(以下、iOSデバイス)を持っているなら、Macを持っていなくても、WindowsからSafariで開いたページのデバッグができる。その方法を書いていく。

検証環境

  • Windows10
  • iOS13

手順

  1. iOSデバイスのSafariのWebインスペクタを有効化する。設定->Safari->詳細

  2. WindowsPCにiTunesをインストール。Store版ではなく従来のソフト版をダウンロードする。

  3. 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
    
  4. scoopからios-webkit-debug-proxyをインストール

    scoop install ios-webkit-debug-proxy
    
  5. scoopからnodejsをインストール

    scoop install nodejs
    

    npmからremotedebug-ios-webkit-adapterをインストール

    npm install remotedebug-ios-webkit-adapter -g
    
  6. iOSデバイスをPCに繋ぎ、iTunesを開き、「このコンピュータを信頼する」

  7. remotedebug_ios_webkit_adapterを起動

    remotedebug_ios_webkit_adapter --port=9000
    
  8. Chromeを開き、アドレスバーに chrome://inspect/#devices と入力

    Configureをクリックし、Target discovery settingsにlocalhost:9000を追加

  9. Safariでデバッグしたいページを開くとchrome://inspect/#devicesのRemote TargetにそのページのURLが表示されるのでinspectをクリック。するとDevToolsが立ち上がってそこからデバッグできる。

関連

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です