Back to Top

Chromeのデベロッパーツールからユーザーエージェントを変更する方法

titleUnder

ユーザーエージェント

ChromeにはデベロッパーツールでUser Agent(ユーザーエージェント)を変更する機能が備わっています。IE・Firefoxなどのユーザーエージェントへ変更したりiOS・Androidのユーザーエージェントへの変更もできるので、パソコンからスマホブラウザチェックに活用できます。

User Agent(ユーザーエージェント)を変更する

ユーザーエージェントはChromeのデベロッパーツールから変更が可能です。
デベロッパーツールは「設定」→「ツール」→「デベロッパーツール」から開けます。
またはWindowsなら「CTRL」+「SHIFT」+「C」、
Macなら「command」+「shift」+「C」のショートカットで開けます。

デベロッパーツールを開いたら一番右下にある「Settings」アイコンをクリック。
(小さいので少し分かりにくいですが)

ユーザーエージェント

「Settings」には「User Agent」の項目があります。
Override User Agent」にチェックを入れるとユーザーエージェント一覧が現れます。
※その下の「Emulate touch events」にチェックを入れると、
スマートフォンのタッチ系のイベントをエミュレートすることができます。

ユーザーエージェント

切り替えたいユーザーエージェントを選択しページをリロードします。
ユーザーエージェントを開いたままでないと反映されませんので、
開いたままでリロードします。
例えば「iPhone ― iOS5」を選択した状態でYahoo!のページを開くと、
スマートフォン用の表示に切り替ります。
デベロッパーツールを閉じてリロードすると元に戻ります。
別のページも確認する場合は開いたままにしておきます。

ユーザーエージェント

デフォルトでiOSとAndroidのユーザーエージェントが入っていますので、
パソコンからスマホのブラウザチェックができます。
※100%同じではないのであくまでも確認用に使い、
端末で最終チェックすることをオススメします。

User Agent(ユーザーエージェント)を追加する

ユーザーエージェントを追加することも可能です。
Other」を選択すると右の入力欄が変更できるようになります。
ここにデフォルト以外のユーザーエージェントを入力することができます。

ユーザーエージェント

ユーザーエージェントの一覧は以下のサイトで確認することができます。

Chrome拡張機能でユーザーエージェントを切り替える方法

Chrome拡張機能の「User-Agent Switcher」を使えばもっと簡単にユーザーエージェントの切り替えができます。
デベロッパーツールを開いたままの状態でしかユーザーエージェントを切り替えできませんが、
アイコンから選択するだけでユーザーエージェントが変更できます。
「User-Agent Switcher」の使い方については別記事で解説しています。

このエントリーをはてなブックマークに追加 Clip to Evernote

Comments