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. Apple、「iPhone 6」のバッテリー交換プログラムを準備している可能性
  2. 【非公式】「iPhone 8」のコンセプトイメージーーみんなの夢と希望を詰め込んだ最強の端末に
  3. さようなら「Vine」、ようこそ「Vineカメラ」
  4. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  5. 【レビュー】「LG 5K UltraFine Display」は「MacBook Pro (Late 2016)」との相性抜群!「5K」は偉大だった