Chrome Dev Tools: Timeline Tab

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on August 24, 2015 10:13:43 PM ● Video Link: https://www.youtube.com/watch?v=mxsZlsG8tKA

Duration: 2:55

14,160 views

118

Info and mini-lesson on the 'Timeline' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool

The Timeline panel lets you record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application.

Just like you use network to find out how long things take to communicate with the internet and you use sources to find out where something's broken, you can use timeline to figure out what's going on and how long it takes in even more detail.

With the timeline you record events using the small circle button. You can record (or capture) stacks, profile js, memory, and paint (css).

When you record (capture) these, it sets them up in small, detailed logs that you can organize many ways to fit you.

All of this will help you to better understand what's happening in the browser, particularly which events require more browser memory than others.

When you're using timeline, remember to use this 'clear' button and to start recording before you load the page, depending on what you want to capture.

You'll notice that when you record JS events, clicking on the title or "function call" on the left will take you to the document and line of that function using the resource panel.