1
0

HTMLをデバッグしてDOMがいつ更新されたかを追いかける

Posted at

Google Chrome で HTML をデバッグできることを最近知った。開発者ツールの Elements を開いて右クリックで 「Break on」 という項目があるので、その中から Element の更新タイミングを選択するだけだ。

image.png

  • subtree modifications: 子要素に変更があったときに描画を一時停止する
  • attribute modifications: 要素自体に変更があったときに描画を一時停止する
  • node removal: 要素が消えたときに描画を一時停止する

自分の場合は、a タグに謎のクエリストリングが focus のタイミングの付与されるのを調べるときに役に立った。(そのときは GA の js が自動付与していたことがわかった。)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0