Skip to content

Instantly share code, notes, and snippets.

@chriszarate
Last active June 1, 2020 16:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chriszarate/587598c910e58260716995a913841f3b to your computer and use it in GitHub Desktop.
Save chriszarate/587598c910e58260716995a913841f3b to your computer and use it in GitHub Desktop.
Debug Fastly response

Debugging browser requests to Fastly objects

Fastly allows you to add a special header to your request which instructs it to include detailed cache information in the response. This information is useful in debugging cache issues, especially around max-age and surrogate keys.

In Firefox

Firefox's dev tools make it easy to edit and resend an HTTP request. Use this flow to add the Fastly debug header in the browser:

  1. Open Dev Tools and switch to the Network tab. You may need to refresh the page to capture the request for the current page.

  2. Switch to the "HTML" filter to help you find the request for the current page.

  3. Select the request for the current page and click the "Edit and Resend" button.

    Screen Shot 2020-06-01 at 10 49 31 AM

  4. Add a new request header on its own line: Fastly-Debug: 1

    Screen Shot 2020-06-01 at 10 49 55 AM

  5. Click "Send" to send the edited request. Select the new request from the left panel (it should appear at the bottom).

  6. You should now see additional response headers from Fastly.

    Screen Shot 2020-06-01 at 10 50 18 AM

In Chrome

Chrome doesn't have a built-in UI for editing requests, but allows you to copy the request as a cURL command. While cumbersome, you can use this approach to add a header to the request, run the command in your terminal, and inspect the response.

chrome

Here is an example command, partially redacted to remove the large number of request headers:

curl 'https://qz.com/' \
  -H 'accept: text/html;q=0.9' \
  -H 'accept-language: en-US,en;q=0.9' \
  --compressed

Add two flags to this request: one is the Fastly debug header and the second (-I) tells cURL to only print the response headers, which makes the output much easier to inspect:

curl 'https://qz.com/' \
  -H 'accept: text/html;q=0.9' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'Fastly-Debug: 1' \
  -I \
  --compressed

You could also use an extension like ModHeader to add the header.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment