Chrome でスマホ表示に切り替えるショートカットキー

Chrome の開発者ツールには、iPhone などのスマホでの表示を再現する「Device Mode」というものが搭載されている。機種に応じた表示サイズに切り替わり、その再現度も高いので、ウェブデザインの調整で役に立っている。

この Device Mode なのだが、これまでマウスでクリックしないとモード切り替えできないのかと思っていたけど、Mac なら Cmd + Shift + M、Windows なら Ctrl + Shift + M で切り替えられることを発見。これにより、以下の手順で爆速 Device Mode 切り替えができることが分かった。

• Mac の場合
  1. Cmd + Alt + I … 開発者ツールを起動する
  2. Cmd + Shift + M … Device Mode を有効にする
  3. Cmd + R … 表示を最適化させるため、ページを再描画する
• Windows の場合
  1. F12 or Ctrl + Alt + I … 開発者ツールを起動する
  2. Ctrl + Shift + M … Device Mode を有効にする
  3. F5 or Ctrl + R … 表示を最適化させるため、ページを再描画する

以上。

• 参考：chromeの要素を検証でスマホモード（device mode）を切り替えるショートカット : 森のコーディング