Google Chromeに標準装備されているUser Agent切り替え機能が便利

エクステンション不要！Chrome標準搭載のUA切り替え機能です

最近使ってみて、改めて便利だなーと思ったのでまとめてみました。Chromeにデフォルトでついている機能なのですが、目立たないというか気づきにくいというか…。

こんな時に便利！

去年末にリリースされた「LINEで送る」機能。

設置方法｜LINEで送るボタン

というわけで、いざ「LINEで送る」を実装したとしても、PCでは表示されないので、どんな風に表示されるか確認したいですよね。そこでChromeのUA切り替えな訳です。

こんな風↓に、iOS Simulatorを使って表示する事もできますが、ブラウザとシミュレータを行き来するのが面倒です。

ChromeひとつでPCとスマホの見比べが出来たらとても楽ですよね。

では、使い方です

標準機能なので、とっても簡単。今すぐできます。

ChromeでUser Agentを変更したいサイトを表示します。
今回は拙作、京都市の市バス位置情報「ポケドス」 -現在地からバス停を探そう-を例にとってみたいと思います。

目的は、「PC版とスマホ版の「LINEで送る」ボタンを見比べたい。表示が変だったら調整したい」です。

右クリックして「要素の検証」を押すか、ブラウザ右上の「ツール」→「デベロッパーツール」でもOKです。
あるいはショートカットキー、
Command（control） + option(alt) + j
を押してデベロッパーツールを開いてください。

デベロッパーツールを開くとこんな状態です。

右下の歯車アイコンをクリックしましょう。
すると、何やら黒い透過画面が出現します。ビビらずとも大丈夫ですｗここで、簡単にUser Agentを切り替えられるのです。
まずUser Agentにチェックを入れます。そうすると選択可能になります。今回はスマホならなんでも良かったので「iPhone -iOS 5」を選びました。更に、「Device metrics」にもチェックしておくと横幅がデバイスサイズになります。また、「Fit in Window」を選ぶと全体がWindowサイズにフィットします。（が、小さくなっちゃうので今回はチェックせず。）

他にも標準装備で以下のUAが選択可能です。なんと、IEもFirefoxも！バージョンごとに色々取り揃えてあります。

さて、「iPhone -iOS 5」を選んだだけでは画面が切り替わっていません。まだこんな感じ。

ここですかさずページを更新してみましょう。すると、スマホ画面に切り替わります。「LINEで送る」ボタンが表示されました！

もし表示位置がおかしいようであれば、このままCSSなどで調整して確認ができますね。楽ちん！

Chromeさえあれば使えるっていうのが嬉しいです。ぜひ試してみてくださいね。

Webと本の人 Webooker （ウェブッカー）

フリーランス Webデザイナー・グラフィックデザイナー

2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。