覚えておきたいDevToolsのコマンドラインAPIまとめ


DevTools、使ってますか？
もはやChromeじゃないと開発できないくらいに飼い慣らされています。

ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。

個人的には[Console API](https://developers.google.com/chrome-developer-tools/docs/console-api?hl=ja)が好きなんですが、今回はConsoleパネルで使える __Command Line API__ の使い方についてまとめてみました。


## $_ 

`$_`には最後に評価した式の結果が保存されています。
Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。

![$_.gif](https://qiita-image-store.s3.amazonaws.com/0/17969/bf89d008-e61d-3db0-7766-fdfb788da9a3.gif "$_.gif")


## $0 〜 $4

`$0`から`$4`にはElementsパネルで選択した要素が5つ保存されています。`$0`が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。
$0は特に使いやすいです。

![$0.gif](https://qiita-image-store.s3.amazonaws.com/0/17969/36707cb3-f7b1-12aa-630f-8012546d8357.gif "$0.gif")



## $() と $$()

`$()`は`document.querySelector()`のエイリアスで、`$$()`は`document.querySelectorAll()`のエイリアスです。

![$$.gif](https://qiita-image-store.s3.amazonaws.com/0/17969/4b9e979e-226c-646f-f614-3b97b8f5c04a.gif "$$.gif")

要素を探すときにタイプ数をかなり減らせます。

※jQueryが読み込まれているページの場合`$()`はjQueryが優先されて`querySelector()`とは違った結果が返ってくるので少し注意。

## $x()

`$x()`はDOM要素を[XPath](http://ja.wikipedia.org/wiki/XML_Path_Language)の指定で取得できます。

例えば以下のようなHTMLがあるとします。

```
<p>
  <a href="#"><img src="hoge.png"></a>
</p>
<p>
  <img src="hoge.png">
</p>
<p>
  <a href="#"><img src="hoge.png"></a>
</p>
<p>
  <a href="#"><img src="hoge.png"></a>
</p>
<p>
  <img src="hoge.png">
</p>
```

このとき「`p`タグの下に`a`タグがある要素だけ取得したい」といった場合は

```
$x("//p[a]")
```

で取得することができます。DOMの構造を指定して要素を取得することができる便利系APIです。

![$x.gif](https://qiita-image-store.s3.amazonaws.com/0/17969/5ccc7d44-9185-8034-3993-a3dcc024cd42.gif "$x.gif")



## inspect()

`inspect()`は引数に指定した要素がDOMに存在している場合、指定した要素がElementsパネルで選択された状態になります。
例えば

```
inspect($('p'))
```

のように実行すれば一番最初にある`p`タグがElementsパネルで選択されます。要素のidやclassが分かってるときには虫眼鏡で探すより早く選択できると思います。

![inspect.gif](https://qiita-image-store.s3.amazonaws.com/0/17969/c052106d-b2de-ad48-a19e-ad736acd135b.gif "inspect.gif")


## getEventListeners()

`getEventListeners()`は引数に指定したDOMに貼られているEventを一覧できます。

下記のコードでは`document`にDOMContentLoadedイベントを、`#button`にclickとmousedownのイベントを貼っています。

```
<button id="button">button1</button>

<script>
  document.addEventListener('DOMContentLoaded', function(e) {
    document.getElementById('button').addEventListener('click',function(e) {
      console.log('click!!');
    });
    document.getElementById('button').addEventListener('mousedown',function(e) {
      console.log('mousedown');
    });
  })
</script>
```

`getEventListeners`を使うと…

![スクリーンショット 2014-04-16 1.24.51.png](https://qiita-image-store.s3.amazonaws.com/0/17969/2e9fd210-011f-eb78-b95b-28139ab13d01.png "スクリーンショット 2014-04-16 1.24.51.png")

![スクリーンショット 2014-04-16 1.25.50.png](https://qiita-image-store.s3.amazonaws.com/0/17969/f88f091a-ba3f-2738-ac4a-d80fc23f0852.png "スクリーンショット 2014-04-16 1.25.50.png")

こんな感じで貼られているイベントを確認することができます。便利ぽよい。


## monitorEvents() & unmonitorEvents() 

`monitorEvents()`は要素とイベントを指定することで、その要素に対するイベントの発生をモニタリングすることができます。

例えば`input`要素の`keydown`や`keyup`といったんキーボード入力関連のイベントを監視したい場合には

```
input = $('#input');
monitorEvents(input, ['keyup', 'keydown']);
```

のようにすることで`#input`に対する`keyup`と`keydown`のイベントをモニタリングできます。

![monitor.gif](https://qiita-image-store.s3.amazonaws.com/0/17969/c777d9d7-cf67-32d7-f92a-4680fbe59007.gif "monitor.gif")

`monitorEvents()`でモニタリング対象にしたイベントを外したい場合には`unmonitorEvents()`で同じように要素とイベントを指定すればモニタリングされなくなります。

```
unmonitorEvents(input, ['keyup', 'keydown']);
```

### イベントのショートハンド

モニタリングするイベント名は配列で複数指定することができますが、`key`関連のイベント(keydown,keyup,keypress,textInput)を全てをモニタリングしたい場合にはイベント名に`key`を指定することで`key`関連のイベントが全てモニタリングできます。

```
monitorEvents(input, 'key');
```

`key`の他にマウス関連のイベントは`mouse`、タッチ関連のイベントは`touch`、`resize`や`focuse``blur`といったイベントは`control`を指定することでまとめてモニタリングできます。

「イベント貼ったけどちゃんと発火してるのかな？」といったときに確認のためにhandlerの中にconsole.logを仕込む、とかやらなくて済むので使いこなせればかなり便利なイケAPIです。


## keys() & values()

それぞれオブジェクトのkeyとvalueだけをよしなに表示してくれます。地味ながら便利。

![スクリーンショット 2014-04-16 1.38.40.png](https://qiita-image-store.s3.amazonaws.com/0/17969/58f1d88c-707e-5443-f59e-b7cd80325d37.png "スクリーンショット 2014-04-16 1.38.40.png")

## clear()

コンソールに表示されているログを消去します。`Ctrl`+`L`とか`Cmd`+`K`とか`console.clear()`でも消せます。

## copy()

`copy()`は引数に指定したDOM要素を **文字列(HTML)としてクリップボード** にコピーします。
NodeListなど配列やオブジェクトはコピーできない(object NodeList のような文字列がコピーされる)ようです。


## おわり

便利なAPIがいっぱいあるので賢く使って開発効率アップ(∩´∀｀)∩

---

参考リンク

* [Command Line API Reference](https://developers.google.com/chrome-developer-tools/docs/commandline-api?hl=ja#selector_1)
* [Chrome Devtools Cheatsheet](http://anti-code.com/devtools-cheatsheet/)

(Chromeの話として書いたけどFirebugでも同じAPIがあって(結構昔から)機能がほぼ一緒なのはナイショ)