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:

  • Page load time
  • Logs
  • Server calls
  • Browser calls
Heads up display (HUD)

Heads up display (HUD)

To expand theHUDand see more details, click the caret on the left.

Expanded heads up display (HUD)

Expanded heads up display (HUD)

In the expanded view, you will see a breakdown of:

  • Network connection, sending request, receiving response, and browser processing time (in milliseconds) for the page request
  • The number of error, warning, and info logs captured in the browser and server
  • The number of XHR/fetch requests made by the browser, with details for each request

The browser calls section contains a detailed list of the calls made, including:

  • The request URL
  • The HTTP method
  • The HTTP status code received from the server
  • The response size (in kilobytes)
  • The request duration (in milliseconds)
  • A hyperlink (blue arrow) to view the request in the Glimpse client

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 sections:

  • 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 Filters: Allows you to only show requests that meet certain criteria.
  • Request Details: Displays the detailed data collected for a selected request.
  • Status Bar: Shows the current version of Glimpse.
Overview of the Glimpse client

Overview of the Glimpse client

Request History

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

Request history

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.

Individual request

Individual request

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

Request user-agent

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 Filters

(since v0.21.5)

The request filter panel is used to show only requests that meet certain criteria in the request history panel. Requests can be filtered by:

  • HTTP method names (e.g., GET, POST, PUT, PATCH, DELETE, etc.)
  • Status code ranges (e.g., 500s, 400s, 300s, 200s, and 100s)
  • File types (e.g., Data, Document, Font, Image, etc.)

To open the request filter panel, click the funnel button on the top right of the request history list.

Request filter button

Request filter button

You will see different filters corresponding to each of the sections listed above. A filter with a blue outline indicates that those types of requests will be shown (unless they are hidden by other filters), and a filter without an outline indicates that they will be hidden from the request history panel.

To hide the filter panel, click the filter button again.

Opened request filter panel showing B and inactive filters

Opened request filter panel showing active and inactive filters

When filters are active, the filter button will appear filled in. The number of requests visible due to filters will also show at the top of the request history panel (e.g., “Requests (10 of 31)” indicates that 10 out of 31 requests are visible).

Closed request filter panel indicating B filters

Closed request filter panel indicating active filters

To reset the filters, open the filter panel again and click “Reset filters” at the bottom right of the panel. This will reset the filters to the default filters, which show most requests.

Filter panel reset button

Filter panel reset button

Request Details

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

Request details

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.

  • Web Services

    The Web 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.

Open source file in VS Code

Visual Studio Code is a free, cross-platform code editor from Microsoft. Starting from glimpse version 0.22.1, source files in the Location column will appear like hyper-links, clicking on one of the links will open the file in VS Code:

Click on a link to F a file b VS Code

Click on a link to open a file in VS Code

If you don’t have VS Code installed, you can download it. Without VS Code installed, clicking hyper-links will result in error dialogs about an unknown protocol.

An experiment by Microsoft