デバイスで要素検証するための環境作成について

◆iphone

スマホサイトのiPhone表示をWindowsでデバッグする方法
iPhoneのWebインスペクタをWindowsで表示できる(ブラウザはChromeが必要)

デバイスを判定するために、itunesをいれてある必要あります。

ios-webkit-debug-proxy-win32をインストールし、Zipを解凍したら完了です。

※iPhoneの方では、Webインスペクタを有効にする必要です。
この設定は、設定アプリ→Safari→詳細にあります。環境構築はこれだけで完了です。

Webインスペクタを表示する

① iPhoneをWindowsにUSB接続します。
iPhoneで「このコンピュータを信頼しますか」と聞かれたら「信頼」をタップします。

② Windowsで、先程解凍したios-webkit-debug-proxy.exeを起動します。
iPhoneと通信できなくなったりするとエラーが表示されます
起動したときにWindowsのセキュリティ警告が出た場合は「アクセスを許可する」をクリックしてください。

③iPhoneでデバッグしたいサイトを開きます。
④ WindowsのChromeでlocalhost:9221を開きます。
⑤ iPhoneのデバイス名のリンクが表示されるので、それをクリックします。さらに、safariで開いているページの一覧が表示されるので、デバッグしたいサイトをクリックします。

ChromeにWebインスペクタが表示され、デバッグできるようになりました。

PC(Chrome)とiphone端末を接続

◆Android

①　Android側で、設定＞システム＞端末情報＞ビルドをタップ、タップ・・
（機種によって変わる場合あり）
⇒　開発者向けオプションが使える状態になる

②　USBデバックにチェックを入れて、PCと接続。許可するを選択。

③ シークレットモードでChromeを開き、F12キー、または右クリックからの「検証」でデベロッパーツールを呼び出す。

④ リンク１の通りに手順を踏む

PC(Chrome)とAndroid端末を接続

ChromeにWebインスペクタが表示され、デバッグできるようになりました。

感想

30分程で環境作成して、作業が進められました。

参考

リンク１
 リンク２
 リンク３