Windows 10 で iOS Safari をデバッグする覚書


n番煎じです。

準備

必要なもの

  • Git
  • Node.js
  • Google Chrome
  • Scoop

まだ Scoop Extras を入れてないなら、入れる

scoop bucket add extras

iOS WebKit Debug Proxy を入れる

scoop install ios-webkit-debug-proxy

RemoteDebug iOS WebKit Adapter を入れる

npm install remotedebug-ios-webkit-adapter -g

iOS 側の設定

  1. 設定 を開く
  2. Safari を押す
  3. 詳細 を押す
  4. Webインスペクタ を ON にする
  5. Safari でデバッグしたいページを開く

Windows 側の設定

  1. PC と iPhone を USB 接続する。
  2. iPhone に PC を信頼させる。

次は RemoteDebug iOS WebKit Adapter を起動する

remotedebug_ios_webkit_adapter --port=好きなポート
  1. chrome://inspect/ に行き、
  2. Discover network targets を ON にする
  3. その横の Configure... を押す
  4. リストに localhost:さっき設定したポート を追加する
  5. Done を押す
  6. しばらく待ってると Remote Target が出現するので、デバッグしたいページの inspect をクリック
  7. Safari と同期した DevTools が開く

しばらく待っても出ないときは、Safari 側をリロードしたりしてみる。

VSCode + LiveServer で iPhone デバッグする小技

  1. VSCode + LiveServer を起動し、使っているポートをメモる。
  2. ipconfig で 192.168.XXX.XXX で始まる、使っている PC の IP アドレスをメモる
  3. iPhone のブラウザ側で 2. で得た IP アドレスの 1. で得たポートにアクセスする 192.168.XXX.XXX:PPPP