More than 3 years have passed since last update.

スマホ向けWebページの検証を行う方法

Last updated at 2021-04-29Posted at 2018-06-03

スマホ向けサイトの表示確認、通信内容確認などの検証を行いたいときのやり方いろいろ。

##スマホだけで確認する方法
###view-source:を使用する
ChromeブラウザやFirefoxで使える方法。URLの先頭にview-source:を加えてWebページを読み込むとhtmlソースを見ることができます。ユーザー辞書に「view-source:」と登録しておくとラクラク。

また、ブックマークレットからソースを表示することは無理でした。

###iOSアプリを使用する
iPhoneやiPadの場合はアプリをインストールすることでhtmlやJavaScriptのソースを確認することができる。「Srcfari」と「View Source」が人気な様子。

##PCからスマホブラウザの情報を確認する方法
PCでWebサイトをデバッグするときと全く同じ感覚でスマートフォンが表示中のWebページのソースや通信した内容の確認が出来るので便利。何より実機による検証なので確実で安心です。

Android実機とPCのChromeブラウザでやる場合

Android 端末のリモートデバッグを行う | Tools for Web Developers | Google Developers

iOS端末の実機とPCのSafariでやる場合

##PCブラウザのデベロッパーツール内モバイルモードを使用してシミュレートする方法
一番手軽なので簡易確認に大活躍する方法です。

基本的に画面幅を変えた上でユーザーエージェント情報を偽装するだけの機能なので過剰な信用は禁物。油断するとヒドい目に遭います。

ヒドい目の例

実機で確認すると画面レイアウトがややズレていた。
タッチ操作のイベントハンドリングをJavaScriptで実装して、PCのChromeブラウザによるエミュレートで満足していたらiPhoneで動いていない。
エミュレートで問題なかったリンククリック時に動作するスクリプトの動作を実機で確認するとJSが干渉して一部のボタンが反応しなくなっていた。

###Chrome

1. シークレットモードとデベロッパーツールの起動

シークレットモードでChromeを開き、F12キー、または右クリックからの「検証」でデベロッパーツールを呼び出します。（もし既に開いているシークレットモードのタブがある場合、予めすべて閉じてから実行してください。）

スクリーンショット右側に表示されているのが呼び出されたデベロッパーツールです。

2. モバイル端末のシミュレート機能を呼び出し

以下画像の赤枠部分のスマホのようなアイコンのボタンをクリックして機能を呼び出します。
ショートカットキーを使って呼び出すことも可能です。

Mac : Command+Shift+M
Windows : Ctrl+Shift+M

Device Mode でのモバイル端末のシミュレート | Tools for Web Developers | Google Developers

3. シミュレート対象の端末を選択

スマホ表示されている画面の左上のメニューでシミュレートする端末を選びます。
「Edit...」オプションを選択すると使える端末の種類を増やしたり、独自の画面幅・ユーザーエージェントを持つ設定を作成することも可能です。
レスポンシブな端末固有ビューポートのテスト | Tools for Web Developers | Google Developers