Timeline in Firefox Profiler

The timeline is used to visualize all the processes used to run the site, along with its threads. By default, you cannot see the threads in the tracks section, but if you right-click, you can get the list of all threads and check or uncheck which you want to remove from the tracks section.

The timeline section consist of:

• Screenshots: During capture, continuous screenshots are taken, and these screenshots are viewed by the developer to check the site activity and changes. You can hover over the screenshots, which will scale the screenshot for proper viewing. You can also save the screenshot by right-clicking the image and selecting “Save Image As“.

• Markers: Markers represent various events and information that occur during capture. Some of the events are mouse input, reflow of the layout, microtasks, etc. You get various information depending on the event you hover over, such as the time to complete the event, the event name, the event description, the event type, and the thread that is running that event.

• Activity Graph:The activity graph represents the CPU usage depending on the operations done by the thread. The graphs are color-coded, i.e., for CPU usage, due to JS interpretation, the graph is colored yellow. If you hover over the graph, you get the CPU usage information, the category of the CPU usage, and the call stack of that category.

• Network Usage: The visual line provides information about the network request made by the browser or the webpage. For example, if you clicked a link during the capture, you may have noticed this line in the timeline. On hovering, you get various information, such as the time taken to complete the request, the load value, the URL of the request, and more.

• Memory Usage: It’s a graph that represents the memory operations that take place during capture. On hovering, you get information such as the number of operations, the memory usage at that point in the graph, and the highest values that the memory usage reached.

Selecting a Range:

You can also focus on a specific range of time in the timeline section for a better view. To do that, follow these steps:

Step 1: Hover over the timeline, and you will find a horizontal line following the cursor. Drag the horizontal line starting at the point and release it at the end of the desired range.

Step 2: The range will be highlighted, and a zoom button will appear. Click the zoom button to view the selected range.

You can perform the same steps to select a range from the already-selected range. For every range selection, a breadcrumb navigation will be added. You can click these buttons to go back to any of the previous sections or the original captured range labeled as Full Range.

We can analyze the performance of our site by using the Firefox browser performance tool. The tool provides visual information about all the processes that are being run at that time and also various resources, such as JS or CSS, that are being downloaded and rendered. This tool is very helpful for developers who are looking for optimization and good performance for a wide range of users.