開発体験を変える! Chrome DevTools Tips 7選

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


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

**手順**

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最近知ったChrome DevToolsの便利機能①<br><br>$0 での選択中のDOM要素取得<br><br>Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得できる。querySelector()でわざわざ探す必要はない。<a href="https://twitter.com/hashtag/Chrome?src=hash&amp;ref_src=twsrc%5Etfw">#Chrome</a> <a href="https://twitter.com/hashtag/DevTools?src=hash&amp;ref_src=twsrc%5Etfw">#DevTools</a> <a href="https://t.co/asPILTYF85">pic.twitter.com/asPILTYF85</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1294970915298725888?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

`$0`はChromeが提供しているConsole Utilities APIです。[Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities) で他にも色々便利機能が紹介されているので一読をお勧めします。

他のAPI一例

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

```js
$('#hoge') 
```

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

```js
$$('div')
```

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

```js
$x("//p")
```


# 2. DOM変化からのDebugger起動（Break on）
DevToolsでのデバッグというとソースコード上に`debugger`を仕込んでというのがありますが、ソースコードを何もいじらずDevTools単体でも実行できます。

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

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

|option名|内容|
|---|---|
|Subtree modifications|現在選択されているノードの子が削除または追加されたとき、または子の内容が変更されたときにトリガーされます。子ノード属性の変更、または現在選択されているノードへの変更ではトリガーされません|
|Attribute modifications|現在選択されているノードで属性が追加または削除されたとき、または属性値が変更されたときにトリガーされます|
|Node removal|現在選択されているノードが削除された時にトリガーされます|

**手順**

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最近知ったChrome DevToolsの便利機能②<br><br>DOM要素の変化起因でのDebugger起動（Break on）<br><br>ElementタブからDOM要素を選び右クリックでBeak on を選択。サブメニューでattribute modificationsなどにチェックすればOK。対象のDOM変化の要因となるスクリプトでDebuggerが起動<a href="https://twitter.com/hashtag/Chrome?src=hash&amp;ref_src=twsrc%5Etfw">#Chrome</a> <a href="https://twitter.com/hashtag/DevTools?src=hash&amp;ref_src=twsrc%5Etfw">#DevTools</a> <a href="https://t.co/5ccPX72tfB">pic.twitter.com/5ccPX72tfB</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1294974689970806789?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

**手順**

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最近知ったChrome DevToolsの便利機能③<br><br>Exception発生箇所に自動でブレークポイント設定<br><br>&quot;Pause on caught exceptions&quot;をONにすると自動でException発生時点で止めてくれる。ソースの何処でエラーが発生しているのか即わかる。<a href="https://twitter.com/hashtag/Chrome?src=hash&amp;ref_src=twsrc%5Etfw">#Chrome</a> <a href="https://twitter.com/hashtag/DevTools?src=hash&amp;ref_src=twsrc%5Etfw">#DevTools</a> <a href="https://t.co/xjtPO4z1RB">pic.twitter.com/xjtPO4z1RB</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1294978465129734147?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

**手順**

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最近知ったChrome DevToolsの便利機能④<br><br>スクリプトのSnippet機能<br><br>任意のコードをSnippetとして登録し、ワンクリックで実行出来る。使用頻度の高いのバック用の関数とかを登録しておくと何かと便利。 <a href="https://twitter.com/hashtag/Chrome?src=hash&amp;ref_src=twsrc%5Etfw">#Chrome</a> <a href="https://twitter.com/hashtag/DevTools?src=hash&amp;ref_src=twsrc%5Etfw">#DevTools</a> <a href="https://t.co/nvC6sNWhG8">pic.twitter.com/nvC6sNWhG8</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1294981736498167810?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



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


**手順**

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最近知ったChrome DevToolsの便利機能⑤<br><br>フルページ or DOM単位でのスクリーンショット<br><br>Chrome拡張機能不要で、Chrome DevTools単体でもページ全体のスクショが撮れる。あと、選択中のDOM要素単位でのスクショも撮れる。<a href="https://twitter.com/hashtag/Chrome?src=hash&amp;ref_src=twsrc%5Etfw">#Chrome</a> <a href="https://twitter.com/hashtag/DevTools?src=hash&amp;ref_src=twsrc%5Etfw">#DevTools</a> <a href="https://t.co/hRdHwPafIU">pic.twitter.com/hRdHwPafIU</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1294984756321427459?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


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

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

**手順**

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最近知ったChrome DevToolsの便利機能⑥<br><br>リクエストの実行形式でのコピー<br><br>別クライアントでのAPIリクエストのテストなどの時にわざわざcURLのクエリを組み立てる必要なくコピペでOKになる。fetchや他の形式にも対応している。 <a href="https://t.co/ZdpRtTiJBw">pic.twitter.com/ZdpRtTiJBw</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1295107950478897152?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



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


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


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最近知ったChrome DevToolsの便利機能⑦<br><br>Coverageでの使用していないJS、CSSの調査<br><br>Coverageタブで今のページでロードされているCSS、JSの内どれくらいのコードを実際に使っているか可視化することができる。 <a href="https://t.co/XuKWYUhD9t">pic.twitter.com/XuKWYUhD9t</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1295124634216484865?ref_src=twsrc%5Etfw">August 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

```js
document.designMode = "on"
```

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

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">That feeling when you first discovered `document.designMode` <a href="https://t.co/bxA1otzCjN">pic.twitter.com/bxA1otzCjN</a></p>&mdash; Tomek Sułkowski (@sulco) <a href="https://twitter.com/sulco/status/1177559150563344384?ref_src=twsrc%5Etfw">September 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

```js
$0.contentEditable = 'true'
```

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">contentEditable初めて知った。<br><br>HTMLElement.contentEditable = &quot;true&quot;<br><br>でブラウザ上で指定要素の内容を書き換えられるようになる。Worpdressのエディタとか、Webページを見たまま編集できる系のツールではこれ使ってるのかな？ <a href="https://t.co/xov3BopxA4">pic.twitter.com/xov3BopxA4</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1295199672420556802?ref_src=twsrc%5Etfw">August 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



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

# 参考
- [Chrome DevTools  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools)
- [5 Chrome DevTools Tricks You Didn't Know! - YouTube](https://www.youtube.com/watch?v=CNsvPG13ozg)
- [CHROME DEVTOOLS 101 TIPS AND TRICKS FOR WEB DEVS - YouTube](https://www.youtube.com/watch?v=ucWpMZoB7Jg)
- [Twelve Fancy Chrome DevTools Tips | by David Gilbertson | HackerNoon.com | Medium](https://medium.com/hackernoon/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)