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:
- Google Chrome Developer Tools: Elements Panel
- Google Chrome Developer Tools: Resources Panel
- Google Chrome Developer Tools: Console Panel
- Google Chrome Developer Tools: Network Panel
- Google Chrome Developer Tools: Scripts Panel
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 http://www.weather.com/ 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.
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 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.
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.
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.