Easy Guide to Saving HAR Files and Console Logs for Troubleshooting

When something goes wrong with a website – whether it is a broken design, slow performance, shows an error message or something else, it is sometimes difficult to find the exact cause of the issue just by looking at the page. That’s where the HAR files or browser console errors come into play. These in-built browser features allow the tech experts or developers to dig deeper into what’s happening behind the scenes. In some cases, our support team may ask for the HAR file and console logs to help troubleshoot the issue.

In this blog, we’ll show you a simple and step-by-step guide on how to generate and save the HAR file and browser console logs so you can share that with your developer or Sucuri support team for troubleshooting.

What is a HAR file?

When you visit a website, the browser loads various resources like images, scripts, styles and more to display the website. A HAR (HTTP Archive) file keeps a detailed record of all the requests that browser makes to the server during the website visit. It captures things like the time it takes for each request, server response, the IP address of the server where the request was sent, the size of the data, headers, cookies, and other useful data.

How to generate a HAR file?

You can export the HAR file on all modern web browsers. Here’s how to generate and save an HAR file on different browsers.

Please note that the HAR file may contain sensitive information. Before sharing it, we suggest removing things like authentication tokens, cookies or personal details from the HAR file. You can use a text editor to edit the HAR file.

Google Chrome

1. Open Chrome and right-click anywhere on the page and select Inspect Element
   or press Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on Mac as a shortcut.
2. In the Developer Tools window, go to the Network tab.
3. Make sure the Preserve Log option is checked.
4. If you’re facing cache issues, check the Disable cache box.
5. Replicate the issue you’re experiencing. You’ll see all requests in the Network tab.
6. Click on the Export HAR (sanitized) button to save the HAR file.

Mozilla Firefox

1. Open Firefox and right-click anywhere on the page and choose Inspect
   or press Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on Mac as a shorcut
2. Go to the Network tab in the Developer Tools.
3. Now replicate the issue that you are experiencing.
4. Once the page is fully loaded, right-click in the network log area and select Save All as HAR.

Microsoft Edge

1. Right-click anywhere on the page and select Inspect.
   or press Ctrl + Shift + I on Windows/Linux or Command + Option + I on Mac as a shortcut.
2. Go to the Network tab and check the Preserve option.
3. Replicate the issue that you are facing so that the requests can be captured in the Network tab.
4. Click on the Export HAR file button to save the HAR file.

Safari

1. Open Safari and click Develop in the menu bar and choose Show Web Inspector.
   or press Command + Option + I on Mac and Ctrl + Shift + I on Windows as a shortcut.
2. If you don’t see the Develop menu, go to Safari > Preferences > Advanced and check Show Develop menu in menu bar.
3. Go to the Network tab and select the Preserve Log option.
4. Now replicate the issue that you are facing.
5. Once the page is loaded, click the Export button to save the HAR file.

Download browser console errors

Sometimes, the browser blocks certain scripts from loading due to CORS issues or there are some Javascript errors or security warnings that don’t appear up in the HAR file. Console errors can give us a better idea of what’s going wrong on the client side. In some cases, we need those logs along with the HAR file to troubleshoot the issue. Here’s how you can save those logs so and share it for troubleshooting:

Google Chrome

1. Right-click anywhere on the page and select Inspect or press Ctrl + Shift + I on Windows/Linux or Cmd + Option + I  on Mac as a shortcut.
2. In the Developer Tools window, click on the Console tab at the top.
3. Go to console settings and select Preserve log.
4. Leave the console window open and reproduce the issue again.
5. Right-click anywhere on the console window and click on Save as to save the warnings/errors in the file.

Mozilla Firefox

1. Right-click anywhere on the page and select Inspect. Alternatively, you can press Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on Mac.
2. In the console tab, go to Console Settings and select the Persist Log and Show Timestamps options.
3. Leave the console window open and reproduce the issue again.
4. Right-click on any warning/error and then click on “Save all messages to file”.

Microsoft Edge

1. Open developer tools by right-clicking anywhere on the page and selecting Inspect or you can press Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on Mac as a shortcut.
2. Go to the Console Settings and select the Preserve Log option.
3. Replicate the issue by leaving the console open.
4. Right-click on the errors/warnings showing on the console tab and select the Save as option to save the logs.

Safari

1. Open Safari and click Develop in the menu bar and choose Show Web Inspector.
   If you don’t see the Develop menu, go to Safari > Preferences > Advanced and check Show Develop menu in menu bar.
2. Select Show Web Inspector or press Cmd + Option + I as a shortcut.
3. From the context menu, select “Preserve Log”.
4. Select all messages showing in the Console tab and right-click on the errors/warnings and click on Save Selected to save the logs in a file.

How to sanitize the HAR file?

When sanitizing a HAR file, start by redacting authentication tokens (like access tokens or API keys) in request headers to protect sensitive credentials. If cookies were sent, sanitize them as they may contain session data. Check the request body for sensitive info like usernames and passwords and redact query parameters containing private data such as tokens or user IDs.

Additionally, ensure response content, including names and email addresses, is sanitized. Remove any API keys or secrets in headers that could grant unauthorized access. Lastly, redact any other sensitive data, such as IP addresses or internal service information.

Here is the example of the HAR file before sanitization:

{
  "log": {
    "version": "1.2",
    "browser": {
      "name": "Firefox",
      "version": "136.0.2"
    },
    "entries": [
      {
        "request": {
          "headers": [
            {
              "name": "Authorization",
              "value": "AccessToken xyz789secretkey"
            },
            {
              "name": "Cookie",
              "value": "session_id=xyz2739372;"
            }
          ],
          "url": "https://example.com/user?token=abc123456&userid=7296493",
          "body": "{\"username\":\"john_miller\",\"password\":\"Password@123\"}"
        },
        "response": {
          "content": {
            "text": "{\"userId\": 7296493, \"email\": \"john@example.com\", \"name\": \"John Miller\", \"address\": \"Abc, City, Country\"}"
          }
        }
      }
    ]
  }
}

After sanitization:

{
  "log": {
    "version": "1.2",
    "browser": {
      "name": "Firefox",
      "version": "136.0.2"
    },
    "entries": [
      {
        "request": {
          "headers": [
            {
              "name": "Authorization",
              "value": "AccessToken REDACTED"
            },
            {
              "name": "Cookie",
              "value": "session_id=REDACTED;"
            }
          ],
          "url": "https://example.com/user?token=REDACTED&userid=REDACTED",
          "body": "{\"username\":\"REDACTED\",\"password\":\"REDACTED\"}"
        },
        "response": {
          "content": {
            "text": "{\"userId\": 7296493, \"email\": \"REDACTED\", \"name\": \"REDACTED\", \"address\": \"REDACTED\"}"
          }
        }
      }
    ]
  }
}

How to share the HAR file?

For securely sharing a sanitized HAR file, you may consider using secure file sharing services such as Google Drive, Dropbox, or OneDrive. Make sure to share the link only with the people you want to give access to and password protect that file for extra security.