Back to Top

スマホのブラウザチェックをPCで!ユーザーエージェント切り替えができるChrome拡張機能「User-Agent Switcher」

titleUnder

User-Agent Switcher for Chrome

User-Agent Switcher for Chrome」はユーザーエージェントをワンクリックで切り替えができるChrome拡張機能です。ブラウザチェックには欠かせない拡張機能です。iOSやAndroidのUAもあり、iPhoneやAndroidなどのスマホのブラウザチェックもパソコンでできます。

User-Agent Switcher for Chrome

Chromeではデベロッパーツールから「User Agent」の切り替えができますが、
いちいち開くのは面倒です。
User-Agent Switcher for Chrome」をインストールしてしまえば、
アイコンから切り替えたいユーザーエージェントをすぐに呼び出せるので非常に便利です。
iPhoneやAndroidといったスマホのブラウザチェックもできます。
Firefoxのアドオンもあります。
ではまずはインストールをば。

User-Agent Switcher for Chromeの使い方

User-Agent Switcher for Chrome」の使い方は簡単です。
インストールするとツールバーにアイコンが追加されます。
仮面舞踏会で装着しそうなマスクみたいなアイコンです。
アイコンをクリックするとユーザーエージェント一覧が表示されます。
Chrome、Firefox、Opera、Safari、Internet Explorer、iPhone、iPad、Androidが切り替え可能となっています。
ユーザーエージェントの追加の方法は後述しますが、
ブラウザのバージョンも追加することができます。

User-Agent Switcher for Chrome

例えばiPhone4に切り替えるとアイコンに「IP4」と表示されます。

User-Agent Switcher for Chrome

この状態でYahoo!を開いてみると、
iPhoneで見る時と同じ状態で閲覧できます。
完全にスマホ用の表示になってますね。

User-Agent Switcher for Chrome

ユーザーエージェントの追加・設定方法

デフォルトの状態では各ブラウザはDefaultしか選択できません。
ユーザーエージェントを追加するには一覧の最下部にある「Setting」か、
アイコンを右クリックして「オプション」から開きます。

「New User-Agent String」にユーザエージェントを入力するわけですが、
よく分からないと思うので(me too)以下のサイトを参考にします。
ユーザーエージェント一覧をまとめてくれているありがたーいサイトです(謝謝)

①・・・ユーザーエージェント名
②・・・ユーザーエージェント
③・・・グループ名
④・・・フラグ名(アイコンに赤く表示される名前)
※フラグ名は3文字しか入力できないので、iOS5は「iO5」にしました。

User-Agent Switcher for Chrome

確認してみると「iOS5」が追加され、
アイコンに「iO5」と表示されていますね。
他のユーザーエージェントも同様の作業で追加していきます。

User-Agent Switcher for Chrome

「User-Agent Switcher for Chrome」入れてから手放せなくなりました。
パソコンでチェックできるのでとても便利です。
パソコンからチェックすると問題なくても、
端末でチェックするとうまくJavascriptが機能してなかったこともあったので、
完成したら端末で実際に確認した方がいいですね。

デベロッパーツールからのユーザーエージェント切り替えする方法は別記事で解説しています。

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

Comments