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

関連エントリー

Google Chromeでスマホサイト制作
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
Google PageSpeed Insights でパフォーマンスチューニング
はじめてのGoogle Chrome Extension
Google Chrome でAjaxを利用しローカルファイルにアクセスする

スポンサードリンク

«現場のプロが教えるWeb制作の最新常識 が発売されます。 | メイン | 今どきのCSS3グラデーションの指定方法»

このエントリーのトラックバックURL
コメントを投稿