ウェブ系エンジニアで働いていると頻繁にChromeのデベロッパーツールをよく使うと思います。
デバッグのときやパフォーマンスのボトルネックを探すとき、レスポンシブ対応のCSSを書く際などにデベロッパーツールは便利ですよね。

そこで今回は、普段自分が使っていて便利だと感じる機能をまとめました。
知っていると知らないでは開発効率が大きく変わると思います。
筆者の私はChromeマスターでもなんでもないので、他にも便利な機能があればコメント教えていただけると今後使えるので助かります。

0.紹介する機能一覧

機能検索するためのショートカットキー
選択したElementを非表示にするショートカットキー
CSSの色指定形式を変更する
任意のHTML Elementにブレイクポイントをおく
直近に選択したHTML Elementを参照する
XHR/Fetchにブレイクポイントを設定する
consoleで直近で評価された値を参照する
CSSセレクターを使ってDOM elementへの参照を取得する

1. 機能検索するためのショートカットキー

コンソールタブ、ネットワークタブなどたくさん機能があるデベロッパーツールですが、詳細検索を使うことでマウスを使わずキーボードだけで切り替えられます。
command + shift + Pを押すことで、下記の写真のように機能が検索できます。

2. 選択したElementを非表示にするショートカットキー

HTML/CSS関連のデバッグしているときに特定の要素の表示・非表示にしたいときも稀にあると思います。
そんな時はElementsの中から非表示にしたい要素をクリックして、hを押すと切り替えができます。

3. CSSの色指定形式を変更する

当たっている色を調整するときに割と便利なのがCSSの色指定形式を変更する方法。
個人的な話ですが、16進数表記やrgb表記が個人的にわかりにくく、hsl表記が好きなので結構色指定の形式を変更します。
方法は簡単で、変更したいCSSの色をshitを押しながら押すと形式が変わります。

4. 任意のHTML Elementにブレイクポイントをおく

JavaScriptでDOM操作をすることがあると思います。
デバッグの際などに、どのJavaScriptのコードによって特定のDOMの変更がなされたのかを知るために、Elementにブレイクポイントを置けます。
ソースコードを追えば済みますが、ソースコードを追う手間を少しだけ省くのに便利です。
ブレイクポイントをおきたいElementを選択肢
-> 右クリックして
-> Break on
を押すことでブレイクポイントを置けます。
ブレイクポイントのタイミングは以下の三つから選べます

・Attributeの変更
・Nodeの削除

5. 直近に選択したHTML Elementを参照する

Elementsタブから要素を選択し、その後にconsoleで$0と打つと直近で選択した要素を参照することができます。
参照した要素にクラスを追加したりDOM操作も簡単にできると知っておくと意外と便利です。

$0.classList.add('new-class')

$0,$1,$2数値を変えることで選択履歴を遡って参照できます。

6. XHR/Fetchにブレイクポイントを設定する

JavaScriptを使ってAPIでデータを取得することがあると思います。
特定のAPIにバグがある際などに、特定のAPIへのリクエストに対してブレイクポイントをおく方法を知っておくと意外と便利です。
方法は簡単で、Sourcesタブを選択し、画面右のXHR/fetch breakpointにデバッグしたいURLを追加すると簡単にブレイクポイントを置けます。

7. consoleで直近で評価された値を参照する

console画面で何かしらの式を書くことがあるかと思いますがそのときに便利な機能です。
画像のように$_を使うことで直前の評価された値を参照することができます

8. CSSセレクターを使ってDOM elementへの参照を取得する

コンソール内で$(selector)を使うことで下記の画像のようにDOMを参照できます。

一番最初の該当するelementを取得できます。
また、$$('selector')を使うことで該当するelements全てを配列で取得することも可能です。
補足情報ですが、こちらはdocument.querySelector()のエイリアスです。

参照

こちらのページではより多くの機能が詳細に記載されています。

終わりに

今回は私が個人的に便利だと思うChrome Developerツールの便利な機能をまとめました。
ぜひ使ってみてください。