Understanding the details of HTTP request processing can be frustrating and time-consuming. Previously, knowing exactly which pieces of middleware produced which parts of a response required adding lots of logging statements, but Glimpse’s Request tab brings all the key details together on a single screen automatically, without any action from you. This includes the specific headers, body and cookies of the request and the response, as well as all of the Express middleware that ran and any modifications made by the middleware. Additionally, the Resources section shows any resources consumed by the browser for the selected request.
The figure above shows the four main components in the request tab:
The request and response detail sections show all you need to know about the request your app received and the response your app sent. You can view headers, cookies, and the body, and for requests, you can view the query string. The body tab provides syntax-highlighting if the body is JSON, XML or HTML content, and for JSON bodies, expand/collapse affordances are available to easily navigate JSON payloads. Need more screen real estate? Hover over the details to see an “Expand View” option.
Server-side web application frameworks like Express.js are built using a concept of a “middleware pipeline”. “Middleware” is just a function that does one piece of a request’s processing. A “middleware pipeline” is the sequence of middleware functions invoked to process the request & return a response. Each middleware function is passed the
response and the
next middleware function in the pipeline. Each middleware can optionally terminate the request (e.g., by sending the response), or can continue the middleware pipeline by calling the
The Middleware table in Glimpse provides a view of all the middleware that has executed as part of the selected request. Glimpse can display the name of the middleware, the package where the middleware function came from, any headers modified by the middleware, and the location in your application where each piece of middleware was registered. This is shown in the picture below:
For example, in the image above, you can see that the “stickerCacheSetup” piece of middleware added the “no-cache” header to the response. And you can see that this piece of middleware was registered at index.js, line 27.
Tip: hover over the “Registered At” column to see the full path of the file.
If you find Glimpse reporting a lot of
[anonymous] application middleware, it’s likely because of the use of anonymous functions. Click for more details about avoiding
When the currently selected request is a browser navigation, the Resources table will list key statistics about the resources downloaded as a result of the navigation. Resources are “CSS”, “scripts”, “XMLHttpRequest”, “images”, and “links”. For each type of resource, we will show the number downloaded, the total time to download those resources, and the total size in bytes of those resources. If no resources were downloaded, or the selected request wasn’t a browser navigation (e.g., it is an HTTP request from a Node client), then the Resources table will be empty.