スマートフォン向けの Web アプリのデバッグは Google Chrome のデベロッパーツールでユーザーエージェントを変更して行うのが簡単

Rails アプリのスマートフォン対応に jpmobile を使ってみたけど、スマートフォンでアクセスしたかどうかを自動で判断してビューを切り替えてくれる機能は超便利。ただ、スマートフォンでの表示を確認したい場合に困った。

表示を確認するためだけにサーバーにデプロイなんてしたくないし、かといってスマートフォンエミュレータをインストールするのは面倒。Web ブラウザのユーザーエージェントを変更すれば表示できそうだけど…。

Google Chrome でユーザーエージェントを変更するための拡張を探してみたところ、なんと、デベロッパーツールでユーザーエージェントでできることが判明した。手順をメモしておく。

  1. Google Chromeデベロッパーツールを起動する
  2. デベロッパーツール右下の設定ボタンをクリックする
  3. User Agent タブを選択
  4. Override User Agent にチェックを入れる
  5. ドロップダウンリストの中から目的のブラウザのものを選択

上記の手順を行うとスマートフォン用のビューが表示された。画面の幅も変更されている。これで手軽に jpmobile での表示をチェックできそうだ。