Google Chromeの「デベロッパーツール」「デバイスモード」を呼び出すキーボードショートカット

Google Chrome Developer Tools Keyboard Shortcut
ウェブのデザインやコーディングをする上で欠かせない「Google Chrome」の機能は「デベロッパーツール」。gori.meに新しいデザインを適用する時は必ず活用している。


頻繁に使う機能は当然、素早く呼び出したい。キーボードショートカットを使って瞬間的に「デベロッパーツール」を立ち上げたい。一般的には表示しているページを右クリックし「検証」をクリックして起動しているかもしれないが、頻繁に使うのであれば間違いなくキーボードショートカットを覚えた方が効率的だ。

本記事ではGoogle Chromeの「デベロッパーツール」と「デバイスモード」を素早く呼び出すキーボードショートカットを紹介するので、参考にどうぞ!

「デベロッパーツール」からの「デバイスモード」

「デベロッパーツール」を開いてMac/PC向け表示を確認し、「デバイスモード」を開いてスマホ向け表示を確認する。細々とデザインをいじる僕としてはどちらも欠かせないツールであり、素早く呼び出せることに越したことはない。

まず「デベロッパーツール」を呼び出すキーボードショートカットは下記の通り:

alt/option + command + i

これで毎回右クリックして「検証」を押す必要がなくなる。「デベロッパーツール」を呼び出したいページを開き、上記キーボードショートカットを打ち込むだけだ。

続いてそのページのスマホ表示を確認したいとしよう。これまでは「デベロッパーツール」の左上にあるボタンをクリックして「デバイスモード」を起動していたと思うが、これはキーボードショートカットで簡単に切り替えることができる。以下を打ってみましょう:

shift + command + m

ポイントは「デベロッパーツール」が起動された状態であり、かつ、ウィンドウのフォーカスがデベロッパーツールになっている必要があるということ。つまり、見ているページのスマホ表示を確認したい場合、最初に紹介した「alt/option + command + i」で「デベロッパーツール」を起動し、そのまま連続で「shift + command + m」と打てば「デバイスモード」に切り替わる。

表示しているウェブサイトのコードを素早く確認したい時に活用するべし!

あわせて読みたい
オススメ

gori.meの最新情報をチェック!!

  1. 【大悲報】2017年のiPhone、「iPhone 7s」と「iPhone 7s Plus」に?!
  2. 「iOS 10.2 Beta 7 / Public Beta 7」、配信開始
  3. App Store、2016年11月に過去最高の売上高を記録
  4. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  5. ポケモンGO、新ポケモンの追加を12月12日に発表することを正式に予告