Chrome DevToolsを使ってiOS 6+7 Mobile Safariをデバッグする

質問

iOS 6 には、リモートデバッグのサポートが組み込まれています ( 1 分間のスクリーンキャスト ). これは WebKit Inspector の 1 年前のフォークと思われる新しい Safari Web Inspector とうまく連携しています。JS の編集や WebSocket フレームの検査など、いくつかの機能が欠落しています。

Safari の Web インスペクターは、WebKit のリモート デバッグ プロトコルを使用します。しかし、Safari はトランスポート レイヤーとして TCP/HTTP を使用しないため、Chrome と互換性がありません。

Apple の従業員である Timothy Hatcher (別名 Xenon) は次のように述べています。

• Safari はトランスポート レイヤーに何を使用していますか？
• この謎のトランスポート層からHTTPへのプロキシを作り、Chrome DevToolsで動作させることは可能でしょうか？

どのように解決するのですか？

この iOS WebKit デバッグプロキシ プロジェクトで有効になります。

はじめに、homebrewでインストールします。

brew install ios-webkit-debug-proxy

シミュレータを実行する（シミュレータを実行している場合）。

SIM_DIR=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer
  "$SIM_DIR/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator" \
  -SimulateApplication \
  $SIM_DIR/SDKs/iPhoneSimulator6.1.sdk/Applications/MobileSafari.app/MobileSafari

プロキシを実行します。

ios_webkit_debug_proxy

エラーのチェック

デバイス上でエラーメッセージを確認します。

lockdowndに接続できませんでした。終了します。そのようなファイルまたはディレクトリはありません。Unable to attach inspector ios_webkit_debug_proxy.

次に、デバイスにプロンプトが表示されているか確認します を確認します。 (iOS 7の例)

現在接続しているコンピュータを信頼しますか？

Trust"を選択し、プロキシを再実行してみてください。

ios_webkit_debug_proxy

デフォルトのdevtoolsを開く

次に http://localhost:9221

DevTools は、デフォルトでは古いバージョン（2012 年 3 月頃の Chrome 18 から）です。

最新の Devtools を試す

により プロトコル の変更により、最新のDevToolsフロントエンドのパーツが完全に動作しない可能性があります。を開くことで試すことができます。

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/pag‌​e/2

ここで port と page の値は、あなたが見ている http://localhost:9221 . 繰り返しますが、これは確かにバギーかもしれません。

より多くのドキュメントは ios-webkit-debug-proxy プロジェクト ページを参照してください。 .

更新しました。 これは iOS7 でも . アップデート : 新しいdevtoolsフロントエンドの手順を追加しました。 パトリック .. 更新 : devtools.htmlをinspector.htmlに変更しました。 Chrome 45用 を追加し、新たに ws のハックを Scheintod 経由で行いました。