サイト制作で毎日お世話になっているChromeデベロッパーツール。
ショートカットを使うと効率UP可能です〜。

ショートカット一覧をデベロッパーツールから確認

メニュー＞Shortcutsで確認できます。
英語の説明ですが、思い出せないショートカットをサッと確認できて便利です😀

公式サイトのショートカット一覧

確実に調べるなら公式サイトのショートカット一覧が便利。こちらは日本語の説明です。

マークアップエンジニアの自分が頻繁に使う
便利ショートカットを3つご紹介します。マウスやキーボードより効率UPができちゃいます

marginやpadding値の微調整に、めっちゃ使います〜〜。
細かい数値調整を手入力してると日が暮れちゃう…

グローバルショートカット	Windows の場合	Mac
[Inspect Element] モードとブラウザウィンドウを開く / 切り替える	Ctrl+Shift+C	Cmd+Shift+C

ショートカットでインスペクトのON/OFFを切り替えます。便利。

ショートカットでデバイスモードのON/OFF切り替えが可能です。
こちらはレスポンシブの検証でたくさん使います。

グローバルショートカット	Windows の場合	Mac
Device Mode の開始	Ctrl+Shift+M	Cmd+Shift+M

使っている開発言語により、便利ショートカットは違うと思います。
マークアップ系でオススメのショートカットがあればコメントいただけると嬉しいです。

毎日お世話になるデベロッパーツール。
繰り返し作業はショートカットで楽できる。