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:
- 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.
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.
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.