Windows7でiOS11のsafariをデバッグ

仕事でiOSのsafariをデバッグする機会があったので手順を備忘録として残します。

  1. (未インストールの場合) iTunes をダウンロードする
  2. (未インストールの場合) Node.js をインストールする
  3. コマンドプロンプトを管理者権限で起動する
  4. コマンドプロンプト上で npm i -g remotedebug-ios-webkit-adapter を実行
  5. remotedebug-ios-webkit-adapter の zip をダウンロード
  6. %AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\vs-libimobile\ios-webkit-debug-proxy-1.8-win64-binという名前のフォルダを作成
  7. 6で作成したフォルダの中に zip の中身を展開
  8. %AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\out\adapters\にあるiosAdapter.jsファイルの132行目あたりのconst proxy=...を以下の値に修正

    1
    const proxy = path.resolve(__dirname, '../../node_modules/vs-libimobile/ios-webkit-debug-proxy-1.8-win64-bin/ios_webkit_debug_proxy.exe');
  9. 確認したいデバイス(iPad など)を接続

  10. コマンドプロンプト上でremotedebug_ios_webkit_adapter --port=9000を実行
  11. Chrome を開き、アドレスバーにchrome://inspect/#devicesと入力
  12. 設定を開き、localhost:9000を追加
  13. 確認したいデバイスの safari の設定(設定 > Safari > 詳細)の
    「Web インスペクタ」を有効化
  14. safari でデバッグしたい url を開く
  15. Chrome の Remote Target に safari で開いた url が表示されるので inspect をクリック
  16. 表出したウィンドウでデバッグ

ブラウザ間の挙動の違いには、いつも泣かされます。。。

【参考】
Debug a Website in iOS Safari on Windows 10

Share