If you’re a web developer, you probably spend a fair amount of time working with Chrome DevTools. It’s one of the best tools out there for diagnosing and improving the performance of your web applications. You can use it to track loading times, optimize CSS and JavaScript, and inspect network activity. But there’s an important piece of performance data that DevTools doesn’t yet expose by default: Long Animation Frames (LoAFs).

In this post, I’ll show you how to use the Performance API and Chrome’s extensibility features to expose LoAF data in DevTools. Along the way, I’ll explain what LoAFs are, why they’re crucial for web performance, and provide code snippets to help you track and debug them in your own projects.