DOM Elementとconsole.dirの組み合わせが便利だったので伝えたい

gistfile1.txt

2015/08/18 にQiitaに投稿した記事のアーカイブです

---

@armorik83です。`console.log()`はおなじみですが`console.dir()`っていつ使うの？とずっと疑問でした。今回ようやく「便利！」と感じたので共有しておきます。（Chrome 44, Firefox 40, Safari 8にて確認）

# あまりlogとdirの違いはない
![img1](https://qiita-image-store.s3.amazonaws.com/0/17959/093ec450-dad0-d10f-8d53-6b9ab46085d7.png)

`var ob = {a: 1, b: 2};`を与えるくらいなら、`console.log()`で十分。

# DOM Elementをdirに渡すと見やすい
**console.log**
![img2](https://qiita-image-store.s3.amazonaws.com/0/17959/5e0e1805-c81e-25a2-c33e-885dffd82351.png)

どの描画と対応しているか、mouseoverで色を付けてくれる。これはこれで便利。

**console.dir**
![img3](https://qiita-image-store.s3.amazonaws.com/0/17959/e9606a0c-8f78-870c-c0b6-5ad1af386530.png)

`console.log`とは異なり、Element内のプロパティがズラズラっと表示される。欲しかったのはこれだよ！

---

現場からは以上です。