JavaScriptのデバッグで、特定の処理を行うコードを探す作業は、コードの規模が大きくなったりすると、
時間がかかってしまうことがあります。
　

Google Chromeに付属されているChrome Developer ToolsのDOM Breakpointsを使用すると、
ページで読み込まれるスクリプトの構造を把握していなくても、該当のコードを効率的に見つけることができます。
　

■DOM Breakpoints
　

Chrome Developer ToolsのDOM Breakpointsは、任意の要素について次のタイミングでブレークポイントを
設定することができる機能です。

・要素のサブツリー変更
・属性の変更
・要素の削除

　

目的の処理で操作される要素に、DOM Breakpointsをセットし、DOMが操作されるタイミングで
ブレークした時のコールスタックを確認すると、スクリプトの構造を把握していなくても、該当のコードを
見つけることができます。
　

設定方法は簡単で、対象となる要素を右クリックし、「要素を検証」を選択します。
Chrome Developer ToolsのElementsパネルが開かれ、さっきクリックした要素のHTMLがハイライトされます。
ここでさらにハイライトされている部分を右クリックすると以下の選択肢が表示され、どのタイミングでブレーク
させるかを選択します。

Break on...Subtree modifications
Break on...Attribute modifications
Break on...Node removal
　

●図3　DOM Breakpointsの設定

　

設定したDOM BreakpointsはElementsパネルまたはSourcesパネル右側の「DOM Breakpoints」から
有効・無効を切り替えたり削除したりできます（図4）。
　

●図4　DOM Breakpointsの有効・無効の切り替え

ブレークした時のコールスタックを確認すると、それらしいコードが推測できます（図5）。
　

●図5　DOM Breakpointsでブレークしたときのコールスタック

　

実際に、Chrome Developer Tools公式ページで試してみることができます。
　

ブレークポイントを設定する要素の選択や、ブレークしたときのコールスタックの読み方に少しコツが
必要ですが、慣れれば、上手く活用することで作業効率が向上するかと思います。