【PCでモバイルの表示を確認したい】GoogleChromeのデベロッパーツールを使ってユーザーエージェントを変更する方法

GoogleChromeをインストール済み、表示したいページを開いているとします。以下のいずれかの方法でデベロッパーツールを開きます。

1. PCのキーボード「F12」キーを押す
2. Chromeブラウザの右上にあるをクリックして、「ツール」→「デベロッパーツール」を開く

デベロッパーツールを開いたら、右下部の設定をクリックします。

下のようにSettingの中の、「Overrides」をクリックします。

Overridesの設定項目が表示されますので「User Agent」をチェックします。

チェックすると、リストからUser Agentを選択できるようになります。

好きなユーザーエージェントを選んで、デベロッパーツールを開いたままページを更新します。（デベロッパーツールを閉じると、設定が外れます）

サンプル

ChromeのAndroid MobileにUser Agentを切り替えて、私のブログを表示しました。

いいですね。PCのChromeブラウザ上でモバイルでの表示ができるので、便利ですよねぇ。