3年ほど前から、私はメインブラウザをFirefoxからGoogleChromeに変更しています。
そのため、Webサイト制作時、iPhoneやAndroidなどスマホ環境の簡易的な表示確認(UserAgenet切替)は、すいぶん容易になりました。

Google Chromeは、以下のようにUserAgenet切替のために、わざわざエクステンションをインストールする必要がないからです。

GoogleChromeでのUA(ユーザーエージェント)切り替え方法

ページ上を右クリックから[要素を検証]
もしくはキーボードの Ctrl+Shift+I、またはF12を押してスマホのアイコンをクリック。

chromeでのUA切り替え

しかし、仕事上「別アカウントでのログイン状態」など同時検証したい時、複数ブラウザを使いますので、Firefoxを立ち上げます。
その際、FirefoxでのUserAgent切り替え(スマホ表示の確認)には、アドオンが必要でした。

さらに、UserAgentの設定も追加が必要でしたので、その方法を記載します。

FireFoxでのUA(ユーザーエージェント)切り替え方法

  1. Firefoxアドオン「User Agent Switcher」を追加する。

    User Agent Switcher :: Add-ons for Firefox

    UserAgentSwitcher

    ※ちなみに、以下の同名のアドオン(ハイフンがある方)「User-Agent Switcher」と間違えないように注意が必要です。
    こちらを試したところ、2015年9月13日時点の最新版のFirefoxではうまく動作しませんでした。

    ハイフンがある方の「User-Agent Switcher」

  2. アドオン「User Agent Switcher」を追加したら、Firefoxを再起動する。
  3. ツールバーのあたりを右クリックして[カスタマイズ]をクリック。
    カスタマイズ
  4. ツールバーかメニュー内に「User Agent Switcher」をドラッグアンドドロップする。
    「User Agent Switcher」をドラッグアンドドロップ
  5. Firefoxをもう一度再起動すると、初期状態では以下のように、InernetExplorerの6/7/8と、iPhone3.0が表示されます。
    (以下はツールバーへドロップした場合の画面)
    しかし、これだけではiOS8など、最新のiPhoneの環境で確認ができないのでUser Agentを追加します。
    初期状態
  6. UserAgentは手動で追加することも可能ですが、それだと手間なので、xmlファイルをインポートします。
    こちらのGitHubのページの中にある「Raw」のところをクリックし、そのページに適当に名前をつけて拡張子「.xml」でダウンロードします。
    Rawをダウンロード
  7. ツールバーの「Edit User Agents]をクリックして、ダウンロードしたxmlファイルをインポートして再起動します。
    xmlファイルをインポート
  8. 以下の画面のように、UserAgentが増えていれば完了です。
    UserAgentが増えていれば完了
  9. また、UserAgentだけでなく画面幅も変えたい場合は、Firefox上で右クリック→[要素を調査]をクリックするか、F12を押して、[レスポンシブデザインモード]のアイコンをクリックすればOKです。
    レスポンシブデザインモード

FirefoxはGoogleChromeと違って、UserAgentの切り替えにひと手間かかりますので、備忘録として記事にしてみました。
お役に立てば幸いです。٩(๑❛ᴗ❛๑)۶