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.
Common use cases:
- Troubleshoot caching by viewing a request’s cache status and whether it was cacheable. If you have defined a custom cache key policy, then you should also review its cache key.
- Troubleshoot behavior by viewing the environment version through which the request was served and the rules applied to a request.
- Verify prefetching behavior by analyzing spawned requests.
- Troubleshoot performance by reviewing key analytics, such as time to first byte (TTFB) and total time.
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.
-
CDN-as-Code: Create a match all rule that enables the Debug Headers feature.JavaScript1export default new Router().always({headers: {debug_header: true}});
Installation
Perform the following steps:
- From the Chrome browser, load the Edgio Developer Tools Chrome extension.
- Click Add to Chrome.
- 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.
-
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: