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
- Server calls
- Browser calls
To expand the
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
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.
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.
The request history panel is used to browse and select the requests made to your application.
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.
Hovering over the browser icon will display its name (if known) and
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.
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.
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.
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).
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.
Glimpse groups data gathered about your applications into categories, each represented as a separate tab within the details panel.
The Timeline tab provides an aggregate, time-based view of the events that occurred during the request.
The Request tab shows details about the request and response, the middleware pipeline, and information about additional resources loaded by the browser.
The Logs tab displays all logging performed during the request, both in your application and in the browser.
The Web Services tab displays all HTTP requests made by your application as part of an incoming request, as well as
fetchrequests 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:
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.