Documentation

Welcome to the Glimpse Documentation! Here we hope to introduce you to the various tutorials, concepts and APIs you might need when discovering and using Glimpse.

NOTE: Glimpse docs are currently being improved. If you'd like to help out, just edit this page or contribute to our GitHub Wiki

Heads Up Display

Glimpse Heads-Up Display (HUD) is a mini dashboard that pulls out the most important details about a request and displays it at the bottom of your page.

HUD Intro

See launch video of HUD in action

Overview

Historically, app developers often missed subtle performance changes made while in the development phase, perf testing was often left until the project completed. Additionally, it was difficult to know that what you had just developed is operating like you expected (for example, which route was matched, which action methods were invoked). HUD provides rich profile information on every page in every environment (development, test and when configured, in production). HUD displays in real time the most important timing information broken down by browser (HTTP), server (HOST) and AJAX.

HUD Detail

Breakdown

HUD is broken down into 3 main sections. This is designed to follow the flow of how your request is handled during its lifecycle.

HTTP

This is everything to do with the request. Here we break it down into a few key points:

HUD HTTP

  • Request: Total request time from request to the DOM ready event.
  • Wire: Total time on the network – including DNS lookup, sending of request, receiving response.
  • Server: Total time on the server.
  • Client: Total time once client kicks in to DOM ready.

The popup provides the following additional information:

HUD HTTP Popup

  • Graph: Shows the relative time that each part of the request takes.
  • Host: Server that responded to the request.
  • Server: Principle that is currently logged in for this session. If you are not logged in, nothing is shown.

HOST

Once the request hits the server, the Host section shows the key points. This aims to merge the most important data points on the server in a meaningful, related way. The best example of this is the contextual linking of SQL queries to the actions that caused these events to occur. The breakdown is:

HUD Host

  • Action: How long root action took to execute.
  • View: How long root View took to render.
  • Controller/Action: Name of the root controller and action.
  • DB Queries: Total query duration and number of all SQL queries.

The popup provides the following additional information:

HUD Host Popup

  • Server: Total time on the server.
  • DB Connections: Total query duration and number of DB queries. A high number of DB queries can be significant when there is high latency to the database (for example in cloud apps).

We also show a listing of the core events that occur on the server:

  • Category: The type of event that was recorded.
  • Description: Generally the name of the event, that is the controller and action that caused the event and the view that rendered the action.
  • Duration: Total time the event took to execute, less the time of any direction child events shown.
  • From start: How far into the request did the event occur.

In this listing we also show any SQL queries that belong to a given event and the ability to show any trivial events that occur.

AJAX

Lastly, is the AJAX section, which shows high-level details of any requests that your page makes. Without opening any other tool, you will instantly know when a request is made. You will also know if any errors occurred in processing the request. This is the breakdown:

HUD Ajax

  • Count: Total Ajax requests detected on this page.
  • Details: Last 2 requests that have occurred.

Additionally, the popup shows the last 6 requests to have occurred as well as a few additional pieces of information:

HUD Ajax Popup

  • URI: URI that the request used to make the request.
  • Duration: Time from when the request left the browser to when the response was received.
  • Size: Response payload size.
  • Method: Type that the request made.
  • Status: Status code that the response object has* (see note below).
  • Content Type: Type that was received.
  • Time: Time that the request was made.

*Note, in some caching scenarios, the browser passes a 200 response to the JS object even though the browser received a 304 from the browser.