当メディアのリンクにはアフィリエイト広告が含まれています

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」と打てば「デバイスモード」に切り替わる。

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

もっと読む

12本の記事を表示する
公開情報
更新日2021年02月14日
執筆者g.O.R.i
コメント(0件)

コメントは承認後に表示されます。良識のあるコメントを心がけ、攻撃的な表現や他人が傷つく発言は避けましょう。なお、コメント投稿時に「利用規約」に同意したとみなします。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

「Google Chrome」新着記事
トレンド検索