Edgio Devtools is a widget that helps developers understand how their site interacts with Edgio, including:
- Edge and browser caching
- The flow of responses from the Edgio cloud to the edge and browser caches
Devtools, which requires our CDN-as-code approach to CDN configuration, is automatically installed when you initialize your property (
edgio init). Use the following installation instructions if Devtools was not installed when your property was initalized.
In order to enable Edgio Devtools, first ensure that the
@edgio/prefetchpackages have been added to your project. To install them using NPM, run:
1npm i -D @edgio/devtools @edgio/prefetch
You may skip this step if you are using
1import installDevtools from '@edgio/devtools/install';23installDevtools();
Alternatively, you can add the following
scripttag to your app’s HTML:
1<script defer src="/__edgio__/devtools/install.js"></script>
Then, if you haven’t already, enable
@edgio/prefetchin your service worker. See Prefetching for more information on enabling
By default, Edgio Devtools is enabled when your app is served from
To customize when Edgio Devtools appear:
Using the Edgio Console, navigate to your environment and create an environment variable named
PREVIEW_EDGIO_DEVTOOLS_ENABLED. Set the value to
falseto explicitly enable or disable the Devtools on the given environment.
Point your browser to
/__edgio__/devtools/disableto 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.