Getting started

Running Glimpse on Node.js

Installation

  1. In your app’s root directory, use npm to install Glimpse.

    npm install @glimpse/glimpse --save-dev
    
  2. Initialize Glimpse before any other require() or application logic (typically at the top of index.js or app.js).

    if (process.env.NODE_ENV !== 'production') {
      require('@glimpse/glimpse').init();
    }
    
  3. Open your app in a browser. The Glimpse HUD should now be at the bottom right of your app.

Next steps

Once you have installed Glimpse, these topics will help you learn more about Glimpse:

Common questions

How do I use Glimpse with ES6 transpilers?

Transpilers (such as Babel) may change the effective order of import statements in their generated code. You can ensure that Glimpse is initialized prior to the import of any other module by using a modified application entry point.

app.js:

/*
 * Existing application logic.
 */

glimpse.js:

if (process.env.NODE_ENV !== 'production') {
    require('@glimpse/glimpse').init();
}

require('./app');

Now you can start your application with Glimpse enabled:

node glimpse.js

How do I manually inject the HUD and browser agent into my site?

When using Express, Glimpse automatically injects the HUD, as well as a browser agent script into HTML pages for capturing important timing and performance metrics.

If you are serving static files outside of the Express router (e.g., a single-page app or static HTML files), you might not see the HUD. If this is the case, you can manually inject the HUD and browser agent scripts into HTML pages.

To do so, copy and paste the script tags below into the <head></head> of your HTML pages. Make sure to replace <BASE_URL> with the base URL of the server that is running Glimpse (e.g., http://localhost:3000):

<script src="<BASE_URL>/glimpse/hud/main.js"
    id="__glimpse_hud"
    data-client-template="<BASE_URL>/glimpse/client/requests/{requestId}?baseUrl=/glimpse/client{&follow,metadataUri}"
    data-context-template="<BASE_URL>/glimpse/context/?contextId={contextId}{&types}"
    data-metadata-template="<BASE_URL>/glimpse/metadata/">
</script>

<script src="<BASE_URL>/glimpse/agent/agent.js"
    id="__glimpse_browser_agent"
    data-message-ingress-template="<BASE_URL>/glimpse/message-ingress/">
</script>

You should then be able to see the HUD on your rendered HTML pages.

Note: this should work if you run Glimpse on a server different than where the injected scripts are being served. The <BASE_URL> can also be omitted if your site is running on the same server as Glimpse. You will need to include it if the static assets (e.g., your front-end code) is running on a different server than where the injected scripts are being served.

What if I’m running multiple processes?

By default, Glimpse will run in a configuration that supports diagnostics of a single Node.js process. If you want to see diagnostics from multiple applications, you can configure your applications as described in the configuration instructions here.

An experiment by Microsoft