[DevTools] 入門講座 #4：iPhone SafariをWindowsでデバッグする手順

はじめに

以下の記事の続きです。

[DevTools] iPhoneデバッグはMacが正解？ Windowsで格闘した記録

iPhoneのSafariをWindowsでリモートデバッグ。libimobiledeviceとの格闘、macOSアップデートの儀式、そしてバグを祓うための準備まで。今まさに同じように迷っている人へ。

https://humanxai.info/posts/devtools-setback/

Windows + DevTools から、iPhoneのsafariでのデバック環境が出来たのでそのメモです。

この記事では、以下のGitHubプロジェクトを利用して、

🔗 artygus/webkit-webinspector

iPhone Safariで開いたページをWindowsのChrome DevToolsで検査・操作・ブレークポイント設定する手順を、なるべくシンプルに紹介します。

• ✅ Xcode不要
• ✅ Mac不要
• ✅ 完全ローカルでOK

✅ 準備するもの（最低限）

• Windows PC
• iPhone 実機（開発者モードON、Safariの「Webインスペクタを許可」ON）
• USB接続ケーブル（信頼済み）
• iTunes（Apple Mobile Device サービスを含む）
• Git & PowerShell
• Chromeブラウザ（DevTools使用）

iPhoneの開発者モードは、私はMacとiPhoneを直接つないで、Xcodeでビルド後に出た項目からONにしています。

✅ 導入の流れ

1. GitHubからクローン

git clone https://github.com/artygus/webkit-webinspector

2. インストール

cd ios-safari-remote-debug-kit\src
./generate.ps1

うちではうまくいかなかったのでコードを修正しています。

$pythonCmd = "python.exe"

3. PowerShellでスクリプト実行

cd webkit-webinspector
./start.ps1

上手くいかない場合は、

ios-safari-remote-debug-kit\src\WebKit\Source\WebInspectorUI\UserInterface

に直接アクセスして python serverを起動

cd src/WebKit/Source/WebInspectorUI/UserInterface/
python -m http.server 8080

4.ブラウザでアクセス

http://localhost:8080/

Chrome DevToolsでiPhoneを確認

chrome://inspect/#devices

json list

http://localhost:9222/json/list

JSONリストを見る事でアクセス先のURLが分かります

以下は一例：

[{
   "devtoolsFrontendUrl": "",
   "faviconUrl": "",
   "thumbnailUrl": "/thumb/http://192.168.0.11:5500/",
   "title": "-----",
   "url": "http://192.168.0.11:5500/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/3",
   "appId": "PID:123"
}]

以下のアドレスで確認可能

http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/3

🌐 なぜ DevTools で iPhone 内部の IndexedDB や Console が見えるのか？

🔧 ios_webkit_debug_proxy がやってること（ざっくり）

[iPhone Safari] ⇄ WebKit Remote Debug Protocol ⇄ ios_webkit_debug_proxy ⇄ Chrome DevTools

📡 実態は「WebSocket通信を中継」してる

• iOS Safari は、**WebKit Remote Debug Protocol（JSON形式のWebSocket）**でデバッガと通信してます。
• ios_webkit_debug_proxy は、iPhone内のSafariのWebKit層と、ローカルPC上のChromeを仲介してくれる「プロキシ」です。

🍪 IndexedDB、LocalStorage、Console が見えるのはなぜ？

それはすべて SafariのWebKitレイヤ から、WebSocket越しに状態を取得しているからです：

つまり、ブラウザの開発者ツール同士で対話してるようなものです。

🧠 補足：ネットワーク越しでも出来る？

できるが、Bonjour（mDNS）やネットワーク越しのWebKitの信頼設定が必要になります。

• 通常は USB が一番簡単・安定
• Bonjourで web-inspector.local をブロードキャストすればWi-Fi経由も理論上可能
• ただし iOS 17以降はさらにセキュリティが厳しくなっていて難易度高め

💡まとめ：なぜ DevTools でIndexedDBが丸見え？

• iPhone側のSafariは、WebKitレイヤで すべての情報をリアルタイムで流している
• ios_webkit_debug_proxy はそれを受信・中継しているだけ
• Chrome DevToolsがその情報を レンダリングして見せてる

🧩 つまり「iPhoneのSafariをそっくりコピーして操作・観察してる」感じですね。

✅ 今の環境、めちゃくちゃ貴重です。

一度閉じたら、もう二度と戻れない状態かもしれない。

今なら、

• 「成功状態での再起動検証」
• 「DevToolsの Network, Sources, Performance のログ取得」
• 「異常系再現→修正ログ記録」

など、やれること全部やってから、初期化テストに進むのが◎です。

最終的にできたバッチファイル

たったこれだけのコードに半日以上時間がかかりました。

@echo off
start powershell -NoExit -Command "cd 'C:\ios-safari-remote-debug-kit\src'; .\start.ps1"
start powershell -NoExit -Command "cd 'C:\ios-safari-remote-debug-kit\src\WebKit\Source\WebInspectorUI\UserInterface'; python -m http.server 8080"

終りに

結局、詰まってた場所は

http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/3

というURL指定で、JSONリストを見るまで正しいアドレスがわかなかっただけでした。

Macが無くても、Xcodeが無くても、ほぼ同じ環境を再現できるので、同様の問題でお困りの方がありましたらご参考ください。