Chromeでかんたんデバッグ！DOMの追加を監視する方法

Chromeの開発者ツール

グーグルが提供しているブラウザであるChromeには開発者ツール（デベロッパーツール）というのがついています。

Chromeでウェブサイトを見ている時にキーボードの「F12」キーを押したり、右クリックから「検証」を押すとこの開発者ツールを使う事ができます。（普通に「×」押したら消えますし、コワいものじゃないのでまずは見てみてくださいね。）

正直ごちゃごちゃしすぎてて、「まるで飛行機の操縦席みたい。なにさわったらどうなるのかワカラン。使いこなしたらとてつもなく便利なんだろうけれど。」というのがほとんどの人の感想だと思います。

今回はそんなChromeの開発者ツールで、javascriptのデバッグをしたい時にありがたい、DOMの追加を監視する方法を紹介します。

1. Chromeの開発者ツール
2. まずは開発者ツールに入る
3. DOM監視中…
4. DOMに変化があったらブレイク
5. jqueryの時はスタックを見る
6. まとめ

まずは開発者ツールに入る

DOMの監視をしたいオブジェクトの上で右クリック。そして「検証」を選びます。

はい、これで開発者ツール（デベロッパーツール）が立ち上がりました。

最初は「Elements」のタブが選択されていると思う（違う場合は「Elements」に切り替えてくださいね）ので、その下に見えているソースコードには該当するオブジェクトのHTMLが表示されているはずです。

んじゃ、その開発者ツール内のHTMLの上でさらに右クリック。

英語でたくさんメニューが表示されて「うっ」と思ってしまいますが、この中の真ん中らへんにある「Break on」を選択。さらに3つくらい選択肢が出てくるので一番上の「subtree modifications」を選びます。

1. subtree modifications：選択した要素のDOMツリーに変化があったら、という事だと思います
2. Attribute modifications：は属性を監視するようです。属性ってIDとか？ちょっとわかりませんでした。
3. node removal：要素が削除された時を監視できます

ちなみに例えば、bodyとか変更を監視したいDOMの親要素とかそのDOMを包んでいるオブジェクトに「Break on」を設定しておくと、その中で変化があったらちゃんと教えてくれます。便利！

DOM監視中…

こうするだけでChromeの開発者ツールはDOMの変化を監視してくれます。

監視してくれているかの確認としては、先ほど「Break on」を設定したHTMLの左側に青色丸アイコンが表示されてたらＯＫ！

DOMに変化があったらブレイク

DOMに変化が起こるとjavascriptがブレイク。一時停止してくれます。

画面が「Elements」から「Soures」に勝手に移動して、どこどこで止まったよーというのを教えてくれます。

ただjqueryを使ってる場合などだと、この「どこどこで止まったよ」というのがjquery内のappend()関数とかになっていて、自分で書いたどのコードが呼び出したappend()なのかこのままじゃわかりません。

jqueryの時はスタックを見る

jqueryなどをライブラリを使っている場合は、同じ画面内にある「Cal Stack」て書いてる所を見ます。

すると今いるのはjqueryという情報とともに、下の行を見ていくと誰が呼び出したのかもずらずらと表示されてます。

クリック（ダブルクリック？）すると呼び出した場所が表示されるので、これで自分の書いたjavascriptのどのコードがDOMに悪さをしているのか簡単に調べることができます。

まとめ

javascriptをいじってるとすぐにはわからないバグに出会う事がしょっちゅうですよね。

なのでWEBページを作っているとDOMの要素を監視できたらデバッグ楽なのに、と思う機会もたくさん。

今回はそんなDOMを簡単に監視できるChrome開発者ツール（デベロッパーツール）の使い方を紹介しました。

DOM関連のバグで頭を悩ませているなら、一度使ってみると感動ものですので試してみてくださいね！