Devtools

Edgio Devtools is a widget that helps developers understand how their site interacts with Edgio, including:

It’s likely that Devtools was added to your app when you ran 0 init. If that’s not the case, or your app predates Edgio v2.22.0, follow these steps to add the Devtools to your app:

In order to enable Edgio Devtools, first ensure that the @layer0/devtools and @layer0/prefetch packages have been added to your project. To install them using NPM, run:

1npm i -D @layer0/devtools @layer0/prefetch

Or with Yarn

1yarn add --dev @layer0/devtools @layer0/prefetch

Note: you can skip this step if you are using @layer0/next or @layer0/nuxt

Add the following to your client JavaScript bundle:

1import installDevtools from '@layer0/devtools/install'
2
3installDevtools()

Alternatively, you can add the following script tag to your app’s HTML:

1<script defer src="/__layer0__/devtools/install.js"></script>

Then, if you haven’t already, enable @layer0/prefetch in your service worker. See Prefetching for more information on enabling @layer0/prefetch.

By default, Edgio Devtools is enabled when your app is served from localhost, 127.0.0.1 or any *.layer0-limelight.link domain.

To customize when Edgio Devtools appear:

Using the Edgio Developer Console, navigate to your environment and create an environment variable named PREVIEW_LAYER0_DEVTOOLS_ENABLED. Set the value to true or false to explicitly enable or disable the Devtools on the given environment.

Point your browser to /__layer0__/devtools/enable or /__layer0__/devtools/disable to explicitly enable or disable Edgio Devtools for your browsing session. This takes precedence over the environment config and the domain default.

If the Devtools were previously enabled and you disable them, you may want to remove the service worker to get rid of the Devtools-specific route handlers that were installed on-demand when enabling it. This can be done using the Application tab in Chrome Developer Tools.