デベロッパーツールの覚えるべき最低限の操作と設定

またまたデベロッパーツール(DevTools)関連です。

これまでなんとなくデベロッパーツールを使ってきましたがもっと楽に操作したいと思って設定やショートカットなどを色々調べてみました。機能面は全然使いこなせていないですが、最低限の設定をした事でデベロッパーツールを使うこと自体のハードルがだいぶ下がった感じがするので今後はガンガン使っていけそうです。僕と同じようにデベロッパーツールを使い慣れていない方は参考にしてみてください。

ショートカット

必要最低限のショートカット。まずこれだけ覚えておけばかなり操作が楽になるはずです。

ウィンドウ系

デベロッパーツールの開閉、表示、モードの切替

機能	ショートカット
デベロッパーツールの開閉	`cmd + opt + I`
インスペクタモードでデベロッパーツールを開く	`cmd + opt + C`
デベロッパーツールが開いてる場合にインスペクタモードのon/off	`cmd + opt + C`
デベロッパーツールのウィンドウ配置の縦横切替	`cmd + shift + D`

パネル系

Elements、Souces等のパネル切替

機能	ショートカット
パネルを順番に切り替える	`cmd + [ or ]`
数字でパネルを切り替える(要追加設定)	`cmd + 1-9`

HTML/CSS系

Elements、SoucesパネルでのHTMLやCSSの検証、コーディングでよく使う

機能	ショートカット
DOM要素の選択	`↑ or ↓`
DOM要素の開閉	開閉したい要素を選択して`← or →`
DOM要素の子要素を開閉	`opt + ← or →`
ファイル検索	`cmd + O`
コマンドパレットを開く	`cmd + P`