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 側の設定
-
設定
を開く -
Safari
を押す -
詳細
を押す -
Webインスペクタ
を ON にする - Safari でデバッグしたいページを開く
Windows 側の設定
- PC と iPhone を USB 接続する。
- iPhone に PC を信頼させる。
次は RemoteDebug iOS WebKit Adapter を起動する
remotedebug_ios_webkit_adapter --port=好きなポート
- chrome://inspect/ に行き、
-
Discover network targets
を ON にする - その横の
Configure...
を押す - リストに
localhost:さっき設定したポート
を追加する -
Done
を押す - しばらく待ってると Remote Target が出現するので、デバッグしたいページの
inspect
をクリック - Safari と同期した DevTools が開く
しばらく待っても出ないときは、Safari 側をリロードしたりしてみる。
VSCode + LiveServer で iPhone デバッグする小技
- VSCode + LiveServer を起動し、使っているポートをメモる。
- ipconfig で
192.168.XXX.XXX
で始まる、使っている PC の IP アドレスをメモる - iPhone のブラウザ側で
2.
で得た IP アドレスの1.
で得たポートにアクセスする192.168.XXX.XXX:PPPP
Author And Source
この問題について(Windows 10 で iOS Safari をデバッグする覚書), 我々は、より多くの情報をここで見つけました https://qiita.com/katai5plate/items/cf4ec16b9d58e07e4ecd著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .