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

ｎ番煎じです。

準備

必要なもの

• 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