インスペクタを用いたモバイル端末での検証方法まとめ

実機での挙動を実機で確認

モバイル用コンテンツの制作をする際、多くの場合はPC用ブラウザのエミュレータであったり、仮想環境にて挙動を確認します。
しかしごく稀に実機でしか起こり得ない崩れやバグが発生することがあります。
検証しなくてもある程度の目安をつけられるものならよいのですが、どうしてもインスペクタを起動して確認しなければ問題の原因を特定できないケースがあります。
以前はAdobe Edge Inspectというツールがありましたが、現在は入手することができません。
そこで2017年現在での検証方法をご紹介します。

Androidの場合

こちらの記事を参考にまとめました

1. USBケーブルで端末とPCを接続し、Google Chromeを起動。
2. アドレスバーにchrome://inspectを入力して開く。
   この時、スマホのほうも確認したいサイトをブラウザで表示しておくこと。
3. chromeに開きたいページのURLを入力し、Openボタンを押下
4. 開くことに成功したら、いくつかボタンが現れるので、そのうちのInspectボタンを押下。
5. chrome上にインスペクタが現れるので検証が可能になります。

iOSの場合

こちらの記事を参考にまとめました

1. ライトニングケーブルで端末とPCを接続し、Safariを起動。
2. Safari「開発」メニューから「端末の名前」を選択。
   この時、スマホのほうも確認したいサイトをブラウザで表示しておくこと。
3. 端末で開いているサイトのリストから任意のサイトをクリックします。
4. Safari上にインスペクタが現れるので検証が可能になります。