はじめに
皆さんこんにちは、株式会社KANGEN Holdingsに所属するフルスタックエンジニアのA.K.です。
本投稿は、元A.K.チームのメンバーからの内容です。
ご本人のプライバシーに配慮し、ご希望により代理で投稿させていただいております。
以前、UbuntuでiOS SafariのWebインスペクタを実行するツールの動作手順の記事を書きましたが、今回は同ツールのWindows版での手順を紹介します。
検証動作環境・必要なツール
今回の記事向けに、自宅PCとiPhoneSE2で試しました。
- PC
- GoogleChrome
- Node.js
- git (あれば尚良し)
- iPhoneSE2 (iOS18.3.1)
注意点
- iOS・Windows・Chromeのバージョンアップによって動作しなくなる場合もあるかもしれません
- ツールのバージョン更新が停止する可能性もあるので、当記事の閲覧時点で利用できないかもしれません
準備
1. 事前に必要なアプリケーションやツールのインストール
インストール方法は検索で沢山出るので、今回は省略します。
- GoogleChrome
- Node.js
- iTunes (Apple Mobile Device USB Driverが必要なため)
2.ios-safari-remote-debug-kitのインストール・初期設定
① ios-safari-remote-debug-kitを、gitからcloneする。
# コマンドプロンプト(ターミナル)上で操作
cd <任意のディレクトリパス>
git clone https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit
gitを入れてない場合は、下記ページから「<> code ▼」→ 「Download ZIP」でダウンロードを実行して、任意のディレクトリに解凍する。
https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit
② エクスプローラー上で「ios-safari-remote-debug-kit」のディレクトリに移動し、その中の「src」フォルダーを開く。
③ 「generate.ps1」を右クリックでコンテキストメニューを開き、「PowerShell で実行」を選ぶ
④ 動作に必要なファイルが自動でダウンロードされ、「Choose iOS version」の入力画面で、iOS端末側のiOSバージョンを入力する。
⑤「Finished!」が出れば完了
⑥ コマンドプロンプト(ターミナル)を開き、以下コマンドを実行する
npm i -g http-server
⑥ コマンドプロンプト(ターミナル)を開き、以下コマンドを実行する
iOS端末を接続し、動作確認
① iOS端末をUSB接続する。
接続したら、iOS側で「このデバイスに写真やビデオへのアクセスを許可しますか?」と出るので「許可」を選択。
②「start.ps1」を右クリックでコンテキストメニューを開き、「PowerShell で実行」を選ぶ
ps1スクリプトを実行すると、ios-safari-remote-debug-kit.exeとPowerShellのウィンドウが表示される。
③ios-safari-remote-debug-kitのウィンドウで、「Connected :9222 to <デバイス名>・()」が表示まで待つ
④上記が表示されたら、PowerShellのウィンドウで「using it to serve the WebInspector」表示されることを確認できたら、
You can then open http://localhost:8080/Main.htmlws=localhost:9222/devtools/page/1
と表示されている箇所のURLをコピーする。
⑤GoogleChromeを開き、コピーしたURLを貼り付け実行。
インスペクタが表示されればOK
