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
2
3
4
const proxy = path.resolve(
__dirname,
"../../node_modules/vs-libimobile/ios-webkit-debug-proxy-1.8-win64-bin/ios_webkit_debug_proxy.exe"
);
  1. 確認したいデバイス(iPad など)を接続
  2. コマンドプロンプト上でremotedebug_ios_webkit_adapter --port=9000を実行
  3. Chrome を開き、アドレスバーにchrome://inspect/#devicesと入力
  4. 設定を開き、localhost:9000を追加
  5. 確認したいデバイスの safari の設定(設定 > Safari > 詳細)の
    「Web インスペクタ」を有効化
  6. safari でデバッグしたい url を開く
  7. Chrome の Remote Target に safari で開いた url が表示されるので inspect をクリック
  8. 表出したウィンドウでデバッグ

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

参考

Debug a Website in iOS Safari on Windows 10

Share