Timeline tab

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.

Glimpse's Timeline tab for tracking down performance bottlenecks.

Glimpse's Timeline tab for tracking down performance bottlenecks.

There are four main components in the timeline tab:

Filter bar

The Timeline tab’s filter bar allows you to either include or exclude events from the Timeline chart below.

Focus better with Timeline tab's filter bar.

Focus better with Timeline tab's filter bar.

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 console module in your application, such as console.time().
  • 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 http and https modules.
  • 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).

The slowest event overview automatically shows the three slowest events.

The slowest event overview automatically shows the three slowest events.

To see the slow event in context, click the blue link at the bottom and you will jump to that event in the timeline.

Timeline overview

In addition to the filtering options provided by the Filter bar component, the Timeline overview allows filtering based on time.

Narrow time spans with the Timeline overview.

Narrow time spans with the Timeline overview.

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.

Timeline chart

The Timeline chart is the heart and soul of the Timeline tab. It provides a graphical representation of the processing of the selected request.

Performance optimizations are a breeze with the Timeline chart.

Performance optimizations are a breeze with the Timeline chart.

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 dom-interactive and 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.

An experiment by Microsoft