デベロッパーツールのDOM Breakpointsを使う

chromeのデベロッパーツールのDOM Breakpointsを使うことで要素が削除されるときや、属性が変わるときにブレークさせることができます。

まずF12でデベロッパーツールを表示します。Elementsのタブを開き、ブレークポイントを設定したい要素を選択します。

選択したら、右クリックで break on を選択し、Subtree modifications、Attributes modifications ,node removalの中から設定したいものを選択するとブレークポイントを設定できます。

Attributes modificationsを設定して、実際に属性が変わる動作をしたとき、その処理でブレークされ、デベロッパーツールのSourceタブが表示されます。右側にcallstackが表示されるので、デバックなどを行うときに、どのあたりで属性が変わる処理を行っているのかということが見つけやすくなります。

業務管理SaaS「クロジカ」のエンジニアメンバーを募集!
自社開発のSaaSプロダクトをアジャイル開発して、実践的な経験を積んでいただけます。