iPhoneiPhoneSafariのデバッグ方法
- Windows環境のChromeでiPhoneSafariのデバッグをする〔Edge Inspect使用〕
Windows環境のChromeでiPhoneSafariのデバッグをする
Edge Inspect使用
2012/11/6
iOS5までは、端末のSafariに開発メニューがあり、そこからコンソールログなど、Webサイトのデバッグ表示ができたのですが、見当たらないと思ってたら、iOS6からはWebインスペクタに変わっていました。 weinreというリモートで動くWebサイトのデバッグツールが使われています。
Adobe Community: Forum: Edge Inspect
どんなものか試してみましたので、ここではWindows環境のChromeでiPhoneSafariをデバッグする手順を簡単にご説明します。
Adobe Edge Inspect必要なものはこちら。一度インストールしてしまえばあとは接続するだけなので簡単です。
- iPhone：実機（WiFi接続）＋「Edge Inspect」アプリ
- Windows：Chrome＋Chrome拡張機能「Edge Inspect」＋「Edge Inspect」アプリ
- 「Adobe Edge Inspect」の入手
PCより以下のサイトにアクセスし、【Get Started】ボタンを押します。
Adobe Edge Inspect | Edge Tools & Services | Adobe & HTML※「Adobe Edge Inspect」を入手するには、「Apple ID」と「Creative Cloudへの登録」が必要です。 Apple IDは無料で取得できます。 Creative Cloudは有料サービスですが、無料メンバーシップで30日間無償で使えます。
Creative Cloudにログインしたら、「Edge Inspect」をダウンロードします。 【ダウンロード】ボタンを押して「AdobeEdgeInspect.msi」をデスクトップなどにダウンロードします。
Adobe Edge Inspect - 「Adobe Edge Inspect」のインストール
ダウンロードしたAdobeEdgeInspect.msiをクリックし、インストーラーを起動します。
AdobeEdgeInspect.msi利用規約に同意する場合はチェックを入れ【Next】ボタンを押します。
Adobe Edge Inspect Installerインストール先のディレクトリを変更しない場合は、そのまま【Next】ボタンを押します。
Adobe Edge Inspect Installerインストールを開始する場合は、そのまま【Install】ボタンを押します。
Adobe Edge Inspect Installerインストールが完了したら、【Finish】ボタンを押してインストーラを閉じます。
Adobe Edge Inspect Installer - 「Bonjour印刷サービス」のインストール
Edge Inspectは、デバイスの自動検出にBonjourを使用しています。 そのため、BonjourがEdge Inspectを実行してコンピュータを自動検出できるようにインストールしましょう。
Bonjourのインストーラは以下にあるはずです。
「BonjourPSSetup.exe」をクリックし、インストーラを起動します。
Win32: /Program Files/Adobe/Adobe Edge Inspect/BonjourPSSetup.exe
Win64: /Program Files (x86)/Adobe/Adobe Edge Inspect/BonjourPSSetup.exe
Bonjour印刷サービスインストーラが起動したら、そのまま【次へ】ボタンをクリックします。
Bonjour印刷サービス利用規約に同意する場合はチェックを入れ【次へ】ボタンを押します。
Bonjour印刷サービス使用許諾を読んだら【次へ】ボタンを押します。
Bonjour印刷サービスインストール先のディレクトリを変更しない場合は、そのまま【インストール】ボタンを押します。
Bonjour印刷サービスインストールが完了したら、【完了】ボタンを押してインストーラを閉じます。
Bonjour印刷サービス - Google Chrome拡張機能のインストール
Chromeブラウザを起動し、Chromeウェブサイトから「Adobe Edge Inspect」の拡張機能をインストールします。
Adobe Edge Inspect（作成者: mobileadobe）
Adobe Edge Inspectインストールすると「In」というアイコンが表示されます。クリックすると下図のように接続しているコンピュータ名＋IPアドレスが表示されます。
Adobe Edge Inspect - iPhoneの設定
iPhoneの[設定]→[Safari]→[詳細]にある「Webインスペクタ」を「オン」にします。
Webインスペクタ - iPhoneアプリのインストールと起動
AppStoreから「Adobe Edge Inspect」アプリをiPhoneにインストールします。
https://itunes.apple.com/app/id498621426
WebインスペクタiPhoneを「Wi-Fi」に接続してから、「Adobe Edge Inspect」iPhoneアプリを起動します。
※3G回線では使用できません。
Webインスペクタ - パスコードを設定してWindowPCとiPhoneを接続
iPhoneアプリのConnections画面に接続しているPCが表示されます。 タップすると、左図のようなワンタイムパスコードが表示されます。
このパスコードを、先ほどインストールしたChrome拡張機能「Adobe Edge Inspect」のpasscodeに入力します。
Adobe Edge Inspectパスコードを入力するとPCとiPhoneが接続され、「＜＞」というアイコンが表示されます。 クリックするとChromeで見ているページがiPhone側に表示され、weinreが表示されます。
Adobe Edge Inspect - iPhoneSafariのコンソールログをChromeで見てみる
コンソールログを出している場合は、weinreのConsoleを開くと、iPhone側で見ているページのログがリアルタイムにコンソールに表示さます。
weinreChrome拡張機能のメニューからは、iPhone側の画面更新・全画面表示切替・スクリーンショット撮影が可能です。 一番右のフォルダアイコンを押すと、スクリーンショットの格納フォルダが開きます。
Adobe Edge InspectiPhoneアプリからは右上のボタンより、今見ている画面の更新、Safariで開く、URLのコピー、スクリーンショットの撮影が可能です。
※iPhoneアプリ側からChromeを操作することはできません。
Adobe Edge Inspect※Chrome・iPhoneで撮影したスクリーンショットはいずれも以下に保存されています。
「C:/Users/{ユーザー名}/Documents/Edge Inspect」