【技あり】 Chromeでモバイルサイトを見る事が出来る設定 「要素を検証」機能

Google Chromeブラウザを使ってモバイル用サイトを確認する方法

特にアプリや拡張機能のインストール無しに見ることが出来ます

ブラウザのUserAgentを書き換えてAndroidやiPhone、iPadの画面を確認出来ます

なかなか便利な小技です。

手順

まずはモバイル画面を確認したいサイトを表示させます

画面の空白部分で右クリック「要素を検証」をクリックします

下に色々とソースなどが表示されていますが、そのツール部分の

「Network」をクリックします

次に右下の設定マークをクリック

User Agentという項目があるので

「Override User Agent」にチェックを入れます

表示させたいモバイル端末を選択します

先程の要素を検証の画面は下にドラッグなどをしておきます

更新ボタンを押すとモバイル用の画面などを確認する事が出来ます

この設定は要素を検証の画面が表示されている場合のみ有効ですが

なかなか便利な小技です。