Google Chrome Dev Tools: Timeline Panel

Ryan Boudreaux illustrates how the Google Chrome Dev Tool Timeline Panel is used to help you fine-tune and optimize your web applications.

Similar to the Network Panel, the Google Chrome Developer Tools Timeline Panel provides an overview of the time that is spent loading a web page document or application.

In case you missed them, previous entries in the Google Chrome Developer Tools series include:

In this demonstration ,I will be using The Weather Channel (TWC) to illustrate the online tool. Of course you can use any website you wish, to do your own experimenting.

Developers at Google have been working on improving scalability and traceability while providing more details on recorded events that display in the Timeline Panel.

In Google Chrome, type in the URL into the address bar or search for "The Weather Channel". Once open to the page, right-click and then select Inspect Element as shown in Figure A below.

If the Tmeline Panel is not already selected make sure you click on Timeline. It is displayed in Figure B.

Next, you will want to start to record a session by clicking on the Record button, then refresh the page (F5); once clicked, you will see the record button turn from gray to red while recording, and the timeline will begin to capture the Loading, Scripting, and Rendering timelines for the web page.

Figure C

After several seconds of capturing, you can click the record button again to stop the timeline recording session, the circle will change back to gray. I let the record session in this demonstration run for about 12 seconds.

The top level view shows the events which have been recorded and are grouped into three categories. The timeline for Loading is represented with a blue line, Scripting is a yellow line, and Rendering is a purple line. The Loading category records all network-related events. The Scripting category includes JavaScript execution upon various events, and Rendering calculates CSS rendering and paint-related activities as they are loaded. The top area also includes a resizable sliding window.

The center area lists a set of records, and these records have titles to the left and timeline bars to the right. Hover over a record or clicking over an event provides details on the events, as shown with the Send Request record in Figure D. Expandable compartments on the graph visualize nested records, as shown with the Layout record in Figure E below.

Figure D

Figure E

All of this helps you to see what activities are happening in the browser, and in particular with the Timeline Panel, you can determine which activities are causing your browser to work harder than others.

Another way to further investigate a scripting event is to click on any yellow Record from the right panel. In this case, I selected an Evaluate Script as shown in Figure F, and then clicked on the resource link, which took me to the Scripts panel where I could view the script file which the event called, as shown in Figure G.

Figure F

Figure G

Click on any blue record to view a network event; in this case, I selected a Send Request as shown in Figure H. Then I clicked on the resource link and it displayed the image as rendered in the right side panel in Figure I.

Figure H

Figure I

The Timeline Panel gives you a look under the hood of how the browser renders web pages and lets you see which processes and resources require more computing power for both rendering and JavaScript load times. This tool allows you to visualize where you need to fine-tune and better optimize your web applications.