Google Chrome 32でスマホのエミュレーションを行う

Google Chrome 32になってスマホなどのエミュレーションを行う方法がわからなくなっていたのですが、教えてもらったのでメモっときます。

追記：最新バージョンでの利用方法は以下のエントリーに記述しました。
Google Chrome 37でスマホのエミュレーションを行う

Macなら⌘ + option + i、WindowsならF12でデベロッパーツールを表示。

デベロッパーツールの表示

右上のアイコンをクリックして設定画面を表示。Overridesにある「Show 'Emulation' view in console drawer」にチェックを入れて設定画面を閉じます。(2014/1/31追記)

show Emulation view

上部のタブで「Elements」を選択。

Elementsタブを選択

右上のアイコンをクリックすると画面下部にウィンドウが表示されます。

アイコンを選択

右側の「Emulation」タブを選択。

Emulationタブを選択

最後に「Emulate」ボタンを押すとスマホのエミュレーションが可能になります。

Google Chrome 32ではスマホのエミュレーションがかなり強化されており、ドラッグアンドドロップでスクロールができるようになったり、画像などをドラッグアンドドロップしても画像が飛び出て表示されないようになっています。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー