Devtools

Edgecast Devtools has been deprecated and will be removed in the next major version of the Edgecast CLI. We recommend using the Edgecast Developer Tools Chrome extension for a more comprehensive view of your site’s performance and cache behavior.
Edgecast Devtools is a widget that helps developers understand how their site interacts with Edgecast, including:
  • Edge and browser caching
  • Prefetching
  • The flow of responses from the Edgecast cloud to the edge and browser caches
devtools

Installation

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.

Packages

In order to enable Edgecast Devtools, first ensure that the @edgio/devtools and @edgio/prefetch packages have been added to your project. To install them using NPM, run:
Bash
1npm i -D @edgio/devtools @edgio/prefetch

Client Widget

You may skip this step if you are using @edgio/next or @edgio/nuxt.
Add the following to your client JavaScript bundle:
JavaScript
1import installDevtools from '@edgio/devtools/install';
2
3installDevtools();
Alternatively, you can add the following script tag to your app’s HTML:
HTML
1<script defer src="/__edgio__/devtools/install.js"></script>

Service Worker

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

Enabling or Disabling the Devtools

By default, Edgecast Devtools is enabled when your app is served from localhost, 127.0.0.1 or any *.edgio.link domain.
To customize when Edgecast Devtools appear:

Per Environment

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

Per Browsing Session

Point your browser to /__edgio__/devtools/enable or /__edgio__/devtools/disable to explicitly enable or disable Edgecast 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.