Edgio

Edgio Developer Tools Chrome Extension

The Edgio Developer Tools Chrome extension provides insight into how your site interacts with Edgio. Specifically, it provides detailed information for the current page and all of the requests spawned from it. Spawned requests include everything from static assets to prefetch requests.
Edgio Developer Tools Chrome extension
Common use cases:

Prerequisite

You must enable the Debug Headers (debug_header) feature on all requests that you would like to inspect with the Edgio Developer Tools Chrome extension.
The recommended configuration is to enable this feature on all requests.
  • Rules: Add a catch-all rule that enables the Debug Headers feature and place it at the top. This rule should not contain any match conditions.
    Rule with the Debug Header feature
  • CDN-as-Code: Create a match all rule that enables the Debug Headers feature.
    JavaScript
    1export default new Router().always({ headers: { debug_header: true } });

Installation

Perform the following steps:
  1. From the Chrome browser, load the Edgio Developer Tools page in the Chrome web store.
  2. Click Add to Chrome.
  3. When prompted, confirm that the Edgio Developer Tools Chrome extension will be installed by clicking Add extension.

Usage

Load the Edgio Developer Tools Chrome extension by navigating to the Edgio tab within Chrome’s DevTools.
Key information:
  • The Edgio tab is only available when a request has been issued to our network through the Chrome tab from which DevTools was launched.
  • The Edgio tab will only display requests issued after it has been loaded. This means that it may initally display a blank page or a partial list of requests. Refresh the page to analyze the current request and all requests spawned from it.
  • If a request contains empty cells for various columns (e.g., Cache Status, Cacheable, and Matched Rules), then the request was either not served through Edgio or it was served through a different property or environment on which the Debug Header feature has not been enabled.
  • Click on a request to view more detailed information about that request.
    Edgio Developer Tools Chrome extension shown with request details
  • Located at the bottom of Chrome’s DevTools are the following performance statistics for the current set of requests in Edgio Developer Tools Chrome extension:
    • TTFB: Time to First Byte.
    • LCP: Large Contentful Paint
    • INP: Interaction to Next Paint
    • CLS: Cumulative Layout Shift
    • FID: First Input Delay
    • Edge Hits: Indicates the number of requests served from cache and the total number of requests issued for the current page that were captured by Edgio Developer Tools Chrome extension. As noted above, it will only capture requests issued while the Edgio tab is active.
    • Prefetches: Indicates the number of successful prefetch requests and the total number of prefetch requests issued for the current page that were captured by Edgio Developer Tools Chrome extension. As noted above, it will only capture requests issued while the Edgio tab is active.
    These statistics are highlighted in the following image:
    Edgio Developer Tools Chrome extension with highlighted statistics