デバイスで要素検証するための環境作成について
◆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分程で環境作成して、作業が進められました。