Detailed debugging of the UI's performance using Google Chrome dev tools

Debugging the UI's for any bottlenecks can be achieved from the Performance tab in the Google Chrome Dev Tools, but sometimes we will need a more detailed analysis of the gathered data. 

Once the recording is made, we can save the data and load it in Google Chrome's tracing tool accessed from the chrome://tracing URL done in the following way

1. Make a recording of the UI from the Performance tab
2. Press "Ctrl + S" to save the profile data in JSON format
3. Load the saved JSON file in chrome://tracing or into their new UI( Perfetto UI )

chrome://tracing

This site lets you inspect the JSON profiles in detail and analyze the data. The navigation on the site happens with the tools on the right-hand side(e.g., to select a specific section of the timeline) and the W/A/S/D keys to navigate left/right and to zoom in/out.

If there is a selection of events in the timeline, you will see a summary of the events and their timings:

Clicking on an event, a more granular summary will be presented, enabling to inspect that specific event

Perfetto UI

Like the chrome://tracing, you can inspect the events here but with a slightly different UI.