スマートフォン用サイトの表示確認に便利です。
スマホ用のサイトやWordPressテーマを編集したとき、いちいちスマホ&タブレットを使って表示を確認するのは面倒ですよね。
iPhoneやAndroidのエミュレータを使ったこともありますが、設定がややこしい上に動作も遅く、ただサイトの表示を確認するためだけに導入するのは少し面倒で無駄な感じが否めませんでした。
そんなとき、普段からFirefoxを使っている方なら『User Agent Switcher』というアドオンと、Firefoxの開発ツールである『レスポンシブレザインビュー』の合わせ技を使うことをオススメします。
User Agent Switcher
その名の通り、UA（ユーザーエージェント）を切り替えるためのアドオンです。このアドオンを使ってUAをiPhoneなりAndroidなりに偽装すれば、Firefoxからでもスマホ用サイトを閲覧することが可能になります。
しかしこのアドオン、初期状態ではIE6～8、検索エンジンのロボット、iPhone 3.0しかUAが登録されていません。
これだけだと少ないので、設定のインポート機能を使ってAndroid等も追加しておきましょう。
ありがたいことに下記のサイトでUA情報をまとめたXMLファイルが配布されているので、ダウンロード→解凍→出てきたXMLファイルをインポートしてください。
これで準備完了です。
レスポンシブデザインビュー
Firefoxの開発者ツールの中に、ウィンドウサイズを自由に変更することが出来る「レスポンシブデザインビュー」というものがあります。メニュー画面から開いてもいいですが、結構使う機能なので「
Ctrl+Shift+M」のショートカットを覚えておくと便利です。
このように、画面サイズを自由に指定できます
合わせて使ってみる
上記の2つを合わせて使い、当ブログのトップページを表示するとこんな感じになります。（UAはiPhoneを指定）
スマートフォンから閲覧したときと全く同じ表示を、Firefox上で確認することが出来ました。
一度設定さえ済ませてしまえば、いつでもすぐにスマホでの表示確認が出来るので、Web制作者やブロガーの方は参考までにどうぞ。
（ちなみにChromeならデベロッパーツールだけで全部出来ます…頑張れFirefox）
関連するかもしれない記事
