ブラウザのDevToolでどのコードがタグを挿入したかを特定する

あるんだろうなーって思っていただけでちゃんと調べずに生きてきたけど、ちゃんとあったので記録する。

結論

ドキュメントを読みましょう。Chromeであれば Pause your code with breakpoints - Chrome Developers を読むと良い。

やりたかっこと

自分の知らないところで見知らぬタグが head 要素に挿入されていた。どっかのコードでappendChildなりされているんだろうなってことはわかるが、どのコードが挿入しようとしているのか特定したかった。

方法

ブラウザのDevToolで監視したい要素に対して右クリック→「Break On (ブレークポイントの位置)」→「subtree modifications(サブツリーの変更)」を選択するだけ。

これで、選択した要素以下で変更が走ったときに止まってくれるので、そのファイル名を確認すると良い。


ソースコードブレークポイントのことしか知らなかったので、もっと早く調べておけばよかったって本当に思う。