27

Is there a way to actually get the DOM elements involved in Chrome's "Recalculate Style" event?

All it says is like "59 elements". But it is very time consuming to slowly start removing elements from the DOM and re-running the timeline profiler to see how it affects the element count of the affected elements. And even then it still hard to figure out which elements could be responsible.

Same question goes for "Update Layer Tree" and "Layout" events.

enter image description here

Fit Dev
  • 3,413
  • 3
  • 30
  • 54

1 Answers1

1

so, there are a few methods that can help you.

You can use Chrome Canary: https://www.google.com/intl/en/chrome/canary/ you can click on an event in the dev tools and it should show you a simple stack trace.

I've also used this piece of code for debugging CSS animations

window.onanimationiteration = console.log;

Hope it will help you in some way

Matthew Husák
  • 427
  • 4
  • 12