知ってると便利かもしれないChrome Developer Toolsの小ネタ集

この記事では、開発に役立つかもしれないChrome Developer Toolsの小ネタを紹介します。

# 数値の調整
CSSの値などを調整する際、上下のアローキーを使用することで1ずつ値を変更することができますが、他のキーを組み合わせることでこの調整量を変更することが可能です。キーの組み合わせと調整量は以下の通りです。

| 調整量 | Windows | Mac |
|:-:|:-:|:-:|
|0.1| Alt + ↑ | ⌥ + ↑ |
|1| ↑ | ↑ |
|10| Shift + ↑ | ⇧ + ↑ | 
|100| Ctrl + ↑ | ⌘ + ↑ | 
(値を下げる場合は、`↓`キーと組み合わせてください)

**0.1ずつ値を変更した場合の例**
![arrow.gif](https://qiita-image-store.s3.amazonaws.com/0/12152/c33468ea-6836-e91c-1bdb-e881148e3bf3.gif)

# 直近に選択した要素の参照
Consoleで`$0`を入力すると、直前に選択した要素への参照を意味します。
例えば、Elementsタブで`<p>`要素を選択したとしましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/5b4c8c43-1acc-4158-1ed1-895ebe362525.png)

この場合、Consoleで`$0`を使用すると、選択した`<p>`要素を参照することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/54b9f996-4dbc-856c-2e11-0a31c428a6d5.png)

なお、`$`に続く番号(n)を変更することで、「n+1」回前に選択した要素を参照することができます。(0〜4までの値が使用できる)

**例**
`$0`: 1回前に選択した要素
`$1`: 2回前に選択した要素
`$2`: 3回前に選択した要素
...

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/d6fe1051-432f-3dad-9c85-ed5cd8708421.png)

# DOMのブレークポイントの設定
Developer Toolsでは、DOM要素にもブレークポイントを設定することができます。

**手順**
1. Elementsタブを開く
2. ブレークポイントを設定する要素で右クリックし、**Break on**メニューから設定したいトリガーを選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/122e24a8-b3c9-d4ca-8cec-5717fdf62fa8.png)

トリガーには、以下の3種類があります。

| トリガー | 詳細 |
|:--|:--|
|subtree modification|小要素が追加、削除、変更された場合にブレーク|
|attribute modification|要素の属性(class, id, nameなど)が変更された場合にブレーク|
|node removal|要素が削除された場合にブレーク|

なお、設定したDOMのブレークポイント一覧は、**DOM Breakpoints**ペインで確認することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/9a630330-9491-acaa-d3c4-4f85911a607e.png)

# ソースコード変更内容の表示
**Changes**タブを使用すると、Developer Toolsによるコードの変更内容を差分として表示することができます。
Changesタブを表示するには、Developer Toolsのメニューから「Changes」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/db286fd3-cde4-1080-6e02-c846c3187f1b.png)

Changesでは、次のようにSourcesで行ったコード変更が差分として表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/48afe90e-10f0-bfd2-60ef-2d2559cb71c8.png)

# Shadow DOMの表示
Developer Toolsの設定を変更することで、特定の要素の[Shadow DOM](https://www.html5rocks.com/ja/tutorials/webcomponents/shadowdom-201/)を表示することができます。

**手順**
1. Developer Toolsの設定画面を表示する
2. **Show user agent shadow DOM**にチェックを入れる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/6b7003d4-2fa7-d8da-c4bc-fbcdf66773bb.png)

上記の設定変更を行うと、Developer ToolsのElementsタブでは、以下のようにShadow DOMの内容が表示されるようになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/ca096ecd-251b-c636-6d93-5d5235a5d29a.png)


# 任意のJavaScriptコードの実行
Developer ToolsのSourcesタブで表示しているJavaScriptコードのうち、任意のコードをConsoleで実行することができます。

**手順**
1. SourcesタブでJavaScriptコードを表示する
2. 実行したい箇所のコードを選択する
3. 右クリックしてメニューを表示し、`Evaluate in console` を選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/9cc03595-5a40-c7ae-ddf7-b89098a5c57a.png)
4. Consoleでコードが実行される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/459cef4c-0bdf-68ee-e509-1b6beddff7c3.png)



なお、この機能は[Snippets](https://qiita.com/fnobi/items/c48b81330c164292f744)でも使用することができます。


# その他
以下の記事でもDeveloper Toolsに関するTipsが紹介されているので、併せてチェックしてみましょう。
[[翻訳]Chrome デベロッパーコンソール　意外と知られていない10の機能](https://qiita.com/aosho235/items/f579ffd4d0901017d76b)

# 参考
[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
[Keyboard Shortcuts Reference](https://developers.google.com/web/tools/chrome-devtools/shortcuts)