User interface

Project Glimpse: Node Edition surfaces to users in two distinct ways:

Heads up display (HUD)

Glimpse starts with the heads up display (HUD) added to pages served by your application. The HUD displays the most basic and pertinent information about that request – the total request time – and, with a click, can open the Glimpse client with the request automatically selected.

Figure 1. Heads up display (HUD)

Figure 1. Heads up display (HUD)

Glimpse client

The Glimpse client is where you will spend most of your time. Like many other development tools, the Glimpse client adopts a common user interface and layout of a list view on the left, showing all of the requests made of the application, and a panel on the right, showing details of requests you have selected.

The Glimpse client is request-based – HTTP requests made to your application will be displayed in real-time. Even activity that occurred in the browser will displayed, associated with the browser’s original navigation.

Basic layout

The Glimpse client UI is divided into five areas:

  • Activity Bar: Located on the far left-hand side, this lets you switch between views. (Note that Glimpse currently has just a single view.)
  • Request History: Contains a list of requests made to the application.
  • Request Overview: Shows summary source, status, and timing information for the selected request.
  • Request Details: Displays the detailed data collected for a selected request.
  • Status Bar: Shows the current version of Glimpse.
Figure 2. Overview of the Glimpse client

Figure 2. Overview of the Glimpse client

Request History

The request history panel is used to browse and select the requests made to your application.

Figure 3. Request history

Figure 3. Request history

The panel summarizes each request, displaying:

  • The time the request was made
  • The browser that made the request
  • Its HTTP method and relative URL
  • The duration of the request
  • The status of the response

A green lock icon will be shown for requests made using HTTPS. Requests are displayed newest first.

Figure 4. Individual request

Figure 4. Individual request

Hovering over the browser icon will display its name (if known) and User-Agent string.

Figure 5. Request user-agent

Figure 5. Request user-agent

To reduce noise, some requests will be hidden. Such requests include:

  • Requests for static content like images, scripts and style sheets.
  • Requests to Glimpse instrumentation endpoints
  • Requests for source-map files
  • Websocket requests

The history panel can be resized by dragging its right-hand border to the left or right. The panel can also be collapsed or restored by clicking the requests icon in the activity bar.

Request Overview

The request overview panel shows additional, general information about the selected request. This includes:

  • Page load time: The total amount of time required to request, receive, and load the page.
  • Client: The source of the request (e.g. the browser), if known.
  • Method: The HTTP method of the request.
  • Status: The status code and description sent with the response.
  • Date: The date on which the request was made.
  • Time: The time at which the request was made.

Some browsers will provide fine-grained timing data related to the request that includes:

  • Network connection: The time spent initiating a connection to the server, including redirects and TLS negotiation.
  • Sending request: The time spent sending the request to the server.
  • Receiving response: The time spent waiting for the response from the server.
  • Browser processing: The time spent by the browser processing and loading the page.
Figure 6. Request overview

Figure 6. Request overview

Page load phases explained

Understanding how each development tool calculates timing data can be tricky. Glimpse therefore provides a helpful, graphical description of its values by clicking the information icon to the left of “Page load time”.

Figure 7. Request timing description

Figure 7. Request timing description

Highlight page load phases

Glimpse provides a simple way to see a timeline scoped to each phase of the browser’s request. Click the timeline icon to the right of a phase and the table shown in the Timeline tab will highlight just that portion of the request.

Request Details

Glimpse groups data gathered about your applications into categories, each represented as a separate tab within the details panel.

Figure 8. Request details

Figure 8. Request details

  • Timeline

    The Timeline tab provides an aggregate, time-based view of the events that occurred during the request.

  • Request

    The Request tab shows details about the request and response, the middleware pipeline, and information about additional resources loaded by the browser.

  • Logs

    The Logs tab displays all logging performed during the request, both in your application and in the browser.

  • Services

    The Services tab displays all HTTP requests made by your application as part of an incoming request, as well as XmlHttpRequest and fetch requests made by the browser via script included in the application’s response.

Use the links to read the in-depth documentation for each tab.

An experiment by Microsoft