Google Chrome Canary でスマホサイトの表示確認

普段chrome使ってないから気づかなかったけど
こんな簡単に出来るようになってたなんて!

canary デベロッパーツール
(バージョン 38.0.2089.0 canary (64-bit)での表示)
グリッドが素敵。

表示方法

command+option+iでデベロッパーツールを開いて、スマホのアイコンをクリック
emulation → device → modelで機種を選択してリロードする、だけ。

[console search emulation rendering]の表示エリアは
右下の歯車の左のアイコン(hide drawer)をクリックすると表示されます。
hide drawer

canaryのダウンロードはこちら

Google Chrome Canary は Chrome の最新機能を備えています。 注意: Google Chrome Canary は開発者や開発段階の機能に興味があるユーザー向けに設計されており、動作が停止することがあります。

chromeだと

Google Chrome で超手軽にスマホ向けデザインを確認する方法 – てっく煮ブログここら辺を読んで
わーなんか面倒くさそうって思ってしまったけど今は(バージョン 35.0.1916.153)普通のchromeでも簡単にモバイル表示出来るようになってるんですね。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.