Win10でiOS Safariのconsoleを確認する方法

WEB制作
Win10でiOS Safariのconsoleを確認する方法

Win10でiOS safariのconsoleを確認する方法です。

先日、ローカル環境で構築したサイトのService Workerが上手く動かった問題もiOSのconsoleのログをこの方法で確認することができたので原因究明することができました。

PCで発生せず、スマホやiOS端末のみで発生するバグなどの解決に際にsafariのconsoleを確認できることはかなり早く問題を解決へ導いてくれることでしょう。

目次

必要なもの

  • Google Chrome
  • ios-webkit-debug-proxy
  • lightningケーブル

Win10環境構築

Githubでios-webkit-debug-proxyをDL後、解凍してから保存します。

brewからでもインストール可能です。

$ brew install ios-webkit-debug-proxy

iOS設定

設定 > safari > 詳細の順で開き「Webインスペクタ」をオンにします。
※ デフォルトはオンです

Webインスペクタを表示手順

  1. PCとiOS端末をlightningケーブルで接続します。
  2. iOSのsafariでデバッグしたいサイトを開きます。
  3. ターミナルからios_webkit_debug_proxyを起動します。 
    $ ios_webkit_debug_proxy
  4. Google Chromeでhttp://localhost:9221/にアクセスします。
  5. アクセス後、接続中の端末名が出てくるので、それをクリックすることでsafariのconsoleを見ることができます。