Optimize for non-Webflow sites

Generate a HAR file for troubleshooting

Updated

Create a HAR file to capture network activity to help the support team troubleshoot.

If you're working with Webflow support on a complex issue, you may be asked to capture a console log and/or generate a HAR file. HAR files show the network requests your browser makes, which can help uncover what’s going wrong.

What is a HAR file?

A HAR file — short for HTTP Archive — is a log of your browser’s interaction with a webpage. It can reveal problems with page rendering (e.g., layout issues or missing content) and performance (e.g., bottlenecks or timeouts).

Because HAR files record browser activity, they may include sensitive info like cookies, page content, and submitted form data (e.g., personal details or credit card info). Make sure to only take actions required to reproduce the issue while recording.

Process overview

  1. Open your browser’s developer tools and start recording
  2. Reproduce the issue
  3. Save the HAR file
  4. Close the developer tools
  5. Send the HAR file to Webflow support

Steps to generate a HAR file

Note

Browser steps may change. For the most accurate instructions, check your browser’s help documentation.

Chrome

  1. Click the Menu icon in Chrome
  2. Choose More tools > Developer tools
  3. Click the Network tab in the panel that opened
  4. Check Preserve log
  5. Make sure the Record icon is active — if not, click it
  6. Refresh the page and reproduce the issue
  7. Click the Export HAR icon to save the file
  8. Close the developer tools panel

Firefox

  1. Click the Menu icon in Firefox
  2. Select Web Developer > Network
  3. Click the Network tab in the panel that opened
  4. Click the Network settings icon and check Preserve log
  5. Refresh the page and reproduce the issue
  6. Click the Network settings icon > Save All As HAR
  7. Close the developer tools panel

Safari

Before you start, temporarily enable the Develop menu:

  1. Open Safari
  2. Click Safari in the top menu
  3. Click Preferences
  4. Click the Advanced tab
  5. Check Show Develop menu in menu bar

Then, generate the HAR file:

  1. Click Develop in the top menu > Show Web Inspector
  2. Click the Network tab
  3. Check Preserve log
  4. Refresh the page and reproduce the issue
  5. Right-click any row in the activity pane and select Export HAR
  6. Close the Web Inspector

You can now disable the Develop menu from Safari's preferences if you want.

Edge

  1. Click the Menu icon in Edge
  2. Select More tools > Developer tools
  3. Click the Network tab — if the tab isn’t visible, click the More tabs icon
  4. Check Preserve log
  5. Make sure the Record icon is active —if not, click it
  6. Refresh the page and reproduce the issue
  7. Click the Export HAR icon to save the file
  8. Close the developer tools panel

Related articles