最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。
誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！

1.$0で選択中のDOM要素の取得

特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。
Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。

手順

1. カーソルで取得したい要素を選ぶ
2. Consoleタブで$0を入力

最近知ったChrome DevToolsの便利機能①

$0 での選択中のDOM要素取得

Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得できる。querySelector()でわざわざ探す必要はない。#Chrome#DevToolspic.twitter.com/asPILTYF85

— Kawamata Ryo (@KawamataRyo)August 16, 2020

$0はChromeが提供しているConsole Utilities APIです。Console Utilities API Reference で他にも色々便利機能が紹介されているので一読をお勧めします。

他のAPI一例

$(selector)
セレクタに一致するDOM要素を返す。document.querySelectorと同意。
（一見jQueryですが、Console Utilities APIです）

$('#hoge')

$$(selector)
セレクタに一致するDOM要素の配列を返す。document.querySelectorAllと同意

$$('div')

$x(path)
xpathに一致するDOM要素の配列を返す。

$x("//p")

2. DOM変化からのDebugger起動（Break on）

DevToolsでのデバッグというとソースコード上にdebuggerを仕込んでというのがありますが、ソースコードを何もいじらずDevTools単体でも実行できます。

1つはElementsタブからのBreak onの設定です。
何か表示が変わるDOM要素を選択して右クリックでBreak onを選択、表示されるサブメニューでいずれかの項目にチェックを入れます。
その状態で画面上にて表示の変化のトリガーとなる動作を行うと、DOMの変化の実行前に処理が止まり、該当変化のイベント処理からステップ実行が可能になります。
（Chrome DevToolsを調べようと思ったきっかけの機能。会社のチームリーダーに教えてもらいました）

Break Onの起動オプションは以下の通りです。

手順

1. Elementsパネルをひらく
2. 下位要素が変化する、または自身の属性が変わる or 破棄される要素を選ぶ
3. 右クリックでBreak onを選択、サブメニューのいずれかにチェックを入れる
4. 画面上で変化のトリガーとなる操作をする

最近知ったChrome DevToolsの便利機能②

DOM要素の変化起因でのDebugger起動（Break on）

ElementタブからDOM要素を選び右クリックでBeak on を選択。サブメニューでattribute modificationsなどにチェックすればOK。対象のDOM変化の要因となるスクリプトでDebuggerが起動#Chrome#DevToolspic.twitter.com/5ccPX72tfB

— Kawamata Ryo (@KawamataRyo)August 16, 2020

3. Exceptionの発生箇所で自動停止

エラー発生時に自動的にブレークポイントを設定することも可能です。
「console上にエラー出てるけど、何処で発生しているんだろう？」という時にわざわざ該当箇所を探しブレークポイントを設定する必要はありません。一瞬でデバッグできます。

手順

1. Sourcesタブを開く
2. 右側のデバッグコンソールのストップアイコンを押す
3. Pause on caught exceptions にチェックを入れる
4. エラーの発生する動作を行う

最近知ったChrome DevToolsの便利機能③

Exception発生箇所に自動でブレークポイント設定

"Pause on caught exceptions"をONにすると自動でException発生時点で止めてくれる。ソースの何処でエラーが発生しているのか即わかる。#Chrome#DevToolspic.twitter.com/xjtPO4z1RB

— Kawamata Ryo (@KawamataRyo)August 16, 2020

4. snippetの登録

良く使うスクリプトをsnippetとして登録する機能です。
登録したスクリプトはコントロールパネルから実行できます。私はちょっとしたデバッグ用のスクリプトなどを登録しています。

手順

1. cmd +shift +p でコントロールパネルを開きsnippetで検索
2. Sources Create new snippetを選択
3. snippetウィンドウで自由にスクリプトを作成（自動保存されます）
4. 実行ボタン、またはcmd +pでコントロールパネルを開き!を入力してsnippet一覧を表示し実行

最近知ったChrome DevToolsの便利機能④

スクリプトのSnippet機能

任意のコードをSnippetとして登録し、ワンクリックで実行出来る。使用頻度の高いのバック用の関数とかを登録しておくと何かと便利。#Chrome#DevToolspic.twitter.com/nvC6sNWhG8

— Kawamata Ryo (@KawamataRyo)August 16, 2020

5. ScreenShot（フルページ or ノード）

スクロール分を含んだフルページのスクリーンショットを撮りたい時ってありますよね。そんな時はおそらくChrome拡張を使っている人が多いと思います。
でも実はDevTools単体でもできます。他にも、Screenshot Capture node screenshotを選べばElementsの選択画面で選択しているノードの範囲でのスクリーンショットもお手軽に撮れます。

手順

1. cmd +shift +P でコントロールパネルを開きscreenで検索
2. Screenshot Capture full screenshotを選択
3. フルページのスクリーンショットがダウンロードされる

最近知ったChrome DevToolsの便利機能⑤

フルページ or DOM単位でのスクリーンショット

Chrome拡張機能不要で、Chrome DevTools単体でもページ全体のスクショが撮れる。あと、選択中のDOM要素単位でのスクショも撮れる。#Chrome#DevToolspic.twitter.com/hRdHwPafIU

— Kawamata Ryo (@KawamataRyo)August 16, 2020

6. APIリクエストの実行形式でのコピー

APIのテストや別クライアントでの操作の際に、APIリクエストをcURLやその他の形式で使いたいって時あると思います。そんな時もDevToolsが使えます。
ネットワークタブからリクエストを選び、右クリックでCopyを選択するだけで様々な実行形式のコードベースが取得可能です。

手順

1. Networkタブを開く
2. コピーしたいリクエストを選択して右クリック
3. Copyのサブメニューから指定の形式を選ぶ

最近知ったChrome DevToolsの便利機能⑥

リクエストの実行形式でのコピー

別クライアントでのAPIリクエストのテストなどの時にわざわざcURLのクエリを組み立てる必要なくコピペでOKになる。fetchや他の形式にも対応している。pic.twitter.com/ZdpRtTiJBw

— Kawamata Ryo (@KawamataRyo)August 16, 2020

7. 使用していないCSS、JSの調査

DevTools単体で静的解析的に、ロードしているものの未使用のCSS、JSを調べることも可能です。
※ あくまでページ単体での調査なので、全ページで使う共通スクリプトをbunldeしていると値が悪く出たりします。そこは注意が必要です。

1. cmd +shift+P でコントロールパネルを開く
2. Show Coverageを選択
3. 表示されるタブで、リロードボタンを実行

最近知ったChrome DevToolsの便利機能⑦

Coverageでの使用していないJS、CSSの調査

Coverageタブで今のページでロードされているCSS、JSの内どれくらいのコードを実際に使っているか可視化することができる。pic.twitter.com/XuKWYUhD9t

— Kawamata Ryo (@KawamataRyo)August 16, 2020

apx. 画面上で自由にテキスト編集

これはChrome DevToolsの機能という訳ではないのですが、分かりやすく凄いので紹介します。
DevToolsのConsoleタブ上で以下のコードを実行すると、画面上の要素を自由に改変できるようになります。
文字列を編集したり、画像を削除したり色々できます。

document.designMode="on"

ちょっと表現を変えてデザインを見てみたりとかする時に便利です。

That feeling when you first discovered `document.designMode`pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco)September 27, 2019

ちなみに$0と組み合わせて、選択中の要素を編集可能にしたい場合は以下でも出来ます。

$0.contentEditable='true'

contentEditable初めて知った。

HTMLElement.contentEditable = "true"

でブラウザ上で指定要素の内容を書き換えられるようになる。Worpdressのエディタとか、Webページを見たまま編集できる系のツールではこれ使ってるのかな？pic.twitter.com/xov3BopxA4

— Kawamata Ryo (@KawamataRyo)August 17, 2020

終わりに

以上「開発体験を変えるChrome DevTools Tips 7選」でした。
ふと調べ始めたら色々ありました。知ってると知らないとでデバッグ効率や開発体験がかなり変わると思います。
まだまだ知らない便利な機能があると思うので、よく使っている機能などあればコメントやRTで教えてもらえると嬉しいですー!

参考

• Chrome DevTools  |  Google Developers
• 5 Chrome DevTools Tricks You Didn't Know! - YouTube
• CHROME DEVTOOLS 101 TIPS AND TRICKS FOR WEB DEVS - YouTube
• Twelve Fancy Chrome DevTools Tips | by David Gilbertson | HackerNoon.com | Medium