The Timeline panel gives you a complete overview of where time is spent when loading and using your web app or page. All events, from loading resources to parsing JavaScript, calculating styles, and repainting are plotted on a timeline.
Follow the steps below to explore the Timeline panel:
- Using Google Chrome, navigate to WebKit Calendar demo.
- Open the Developer Tools window as described in the How to Access the Developer Tools section of this tutorial.
- If it is not already selected, select Timeline.
Click the Record button. The disk on the button changes to red. Now press F5 or click the browser's Reload button within the inspected window to reload the page.
When the page has completed reloading, return to the Developer Tools window, click the Record button again. The disk changes to gray.
Times recorded for loading are shown in blue, for scripting in yellow, and for rendering in purple. You can toggle visibility of each of these event types using three colored checkboxes in the status line. You can also filter out the events shorter than 15ms. by toggling the filter button in the status bar. The button will be highlighted with blue when short events are visible and will turn black when the events are filtered out.
Note a thin blue and red marks over the time rulers—these correspond to the time when DOMContentLoaded and loaded events are fired during page loading.
The lower part of the window lists events, with more information provided in parentheses. To change the width of the sidebar, drag the line to the right of the sidebar.
Note that the first event, Send Request (Calendar.html) is shown with a bar that consists of three shades of blue. The darkest one marks the time that the event itself took, the next one corresponds to the CPU time that this event along with all the nested events took (here, it includes Receive Response, Receive Data and so on), and the palest bar stands for the wall time between the start of the first event and the end of the last event.
To zoom in, move the grey slider on the right-hand side towards the left, until it is next to the blue bar in the Loading row.
Now switch to the Memory mode by using a button in the top left corner of the Timeline panel. Press the Record button again, return to the Calendar window and jump over a few months by using left and right arrows under the month name. Observe memory consumption is growing. Go to Timeline panel again, press the Collect Garbage button depicted as a trash bin in the status bar, and bring the mouse back to the inspected window. Observe that after you forced garbage collection, the memory consumption decreased.
