Home > WEB > Google Chromeでのスマホの動作確認方法(UA切り替え)

    Google Chromeでのスマホの動作確認方法(UA切り替え)

    GoogleChromeでUserAgentを切り替える方法①

    GoogleChromeでUserAgentを切り替える方法①

    1ヶ月程前にメモっておこうと思っておきながら途中まで書いてスッカリ忘れていましたが、Google ChromeのUserAgent(ユーザーエージェント)の切り替え機能を使って擬似的にスマホ(iOSやAndroid)環境の確認する方法です。

    先日制作したカワイイものMARKETがスマホの場合にページを切り替えるようになっているので例としてご紹介します。上の画像はPCで見た時(デフォルト)の状態になります。

    1.Chromeで確認したいサイトを開いたら[表示] – [開発 / 管理] – [デベロッパー ツール](Command(Win:Ctrl)+Shift+IもしくはC)でデベロッパーツールを開きます。

    2.開いたら右下にある歯車マーク①をクリックすると黒い設定画面が開くので[Network] – [Override User Agent] リスト②の中から確認したい環境を選びます。

    GoogleChromeでUserAgentを切り替える方法②

    GoogleChromeでUserAgentを切り替える方法②

    3.リストを切り替えたら更新(リロード)すると指定したUserAgentで開いたことになるため、カワイイものMARKETでは開いた瞬間にスマホ用の別ページに飛ばされます。この時デベロッパーツールを閉じてしまうと無効になってしまうので開いたままで更新する必要があります。

    GoogleChromeでUserAgentを切り替える方法③

    GoogleChromeでUserAgentを切り替える方法③

    もしデベロッパーツールが邪魔してるようなら左下の枠のようなアイコンをクリックすることでポップアップに切り替えることができます。もしMediaQueriesでCSSを切り替えているようだったら合わせてブラウザサイズも変更すればリアルタイムでちゃんと切り替えをしてくれます。

    あくまでUserAgentを切り替えているだけなので、どんな感じで表示されているかの確認程度にしてエミュレーターや出来ればその端末で確認することをオススメします。
    特にスクリプトを使っているとスマホではスペック的な問題でレスポンス面がネックになってきますからね。

    とはいえ目安としてはかなり使えるので便利!!
    ちなみに現在の自分のメインブラウザであるIron(ver.16)ではこのUserAgentの切り替え機能は未実装でした。残念!!

    COMMENTS : 0

    Comment Form

    TRACKBACKS : 0

    Trackback URL
    http://www.kara-full.com/hibi/web/120308_chrome-ua.html/trackback
    RECOMMEND
    • Apple Magic Trackpad

      マルチタッチによる多機能なトラックパッド。マウスとまるでUIが違うため慣れが必要だけど、慣れると超便利!関連記事はコチラ

    • シグマ 30mm F1.4 EX DC

      f1.4なので室内でも明るく撮れ、かなりピンポイントで焦点が合うレンズ。ボケ味がいい感じなので温かみのある写真が撮れます。初めに購入したレンズ。関連記事はコチラ

    • I-O DATA 縦・横置き両対応USB接続外付HD 2.0TB

      安くて静かで大容量の外付けHD。縦横どちらでも置けるのが何気に嬉しい!関連記事はコチラ

    • Web制作の現場で使うjQueryデザイン入門[改訂新版]

      jQuery1.9にも対応したjQuery本の入門書。入門書とはいえlightbox風ギャラリーやバリデーションチェックの作り方も載ってて中級者までカバー。

    • おいしいご当地スーパーマーケット 47都道府県で出会ったひとめボレ食品さん

      スーパーマーケットマニアの森井ユカさんがついに日本のスーパーに!懐かしいのから新しいのまでデザイン性優れた食品パッケージが満載!ちなみに大分のコメント書かせて頂きました。関連記事はコチラ

    RSS
    Mail
    AFFILIATE-Google