You want to deliver fast and performant applications to your end users. But often times, it is challenging to detect the parts of your app that are the source of performance bottlenecks. Is it the middleware layer, database queries, third party web services or a combination of them all? The Timeline tab helps you identify the issue by giving you a time-based overview of the key processing events for the selected HTTP request/response. Use the Timeline tab for a high-level understanding of when events occurred, their duration and their relative ordering.
There are four main components in the timeline tab:
The Timeline tab’s filter bar allows you to either include or exclude events from the Timeline chart below.
There are two levels of filtering available: First, you can filter events based on whether they occurred on the server or in the browser (E). Next, you can filter out events based on their type (F):
- Logs for any events related to the usage of the
consolemodule in your application, such as
- Data for MongoDB database queries. (Coming soon)
- Request for middleware processing events from Express.js.
- Web services for web service requests made with Node’s
- Other for miscellaneous events that don’t appear in the other categories.
If you ever need to get back to the defaults, filters can be reset with one click (G).
Note: The timeline can also be filtered by time with the Timeline overview component.
Slowest event overview
Glimpse will automatically analyze the selected request and show you its three slowest events (by duration, after any filters from the Filter Bar are applied).
To see the slow event in context, click the blue link at the bottom and you will jump to that event in the timeline.
In addition to the filtering options provided by the Filter bar component, the Timeline overview allows filtering based on time.
You can drag the slider handles to the left or right to zoom in on a more specific time range. When you do, the Timeline Chart will show only the events that occurred within that narrowed time span.
The Timeline chart is the heart and soul of the Timeline tab. It provides a graphical representation of the processing of the selected request.
Two types of events are shown in the Timeline chart, “spans” and “point-in-time” events. Spans are events that elapsed over a period of time, such as a piece of middleware or an external HTTP call. Spans are displayed as a horizontal bar, where the color of the bar correlates to the type of the event (as shown in the Filter bar). Hovering over a span will show what percentage of the overall request that specific event is.
A “point-in-time” event is shown as dashed vertical bar. These correspond to events that don’t have a duration. Examples include calls to the
performance.mark Web API,
console.error statements, as well as built-in
loadEventStart events from the Navigation Timing Spec (for details, see the W3C Navigation Timing Recommendation and Mozilla’s Navigation Timing API documentation). You can mouse-over the vertical bar to see the type of event & the exact time it fired.
For further details on any of the events that appear, you can view the specific tab for that type of request; log events will be on the Logs tab, Request events will be on the Request tab, and Web Services events will be on the Services tab.