How to Capture Network Logs (HAR) and Console Errors

In this article, we will cover:

How to Capture Browser Console Errors

Before generating a HAR file, it is often helpful to see the Console and grab a screenshot. This tab displays specific code errors, failed scripts, or security violations.

  1. Open DevTools (F12 or Cmd+Option+I).

  2. Click the Console tab at the top.

  3. Reproduce the issue. Look for rows of text highlighted in Red.

  4. Take a Screenshot: Ensure the error message and any associated file names (on the right side) are visible.

  5. Copying Logs: You can also right-click anywhere in the console and select "Save as..." to export the text as a .log file.

How to generate a HAR file for Safari, Chrome, Edge, IE, Firefox and Opera

A HAR file (HTTP Archive) records the network traffic between a browser and the web. It is useful for diagnosing performance issues, broken requests, slow resources, redirects, and other network problems. A HAR can include request and response headers, cookies, timings, and sometimes request or response bodies. Because HAR files can contain sensitive data such as cookies, authorization headers, and POST bodies, treat them like private files and redact any secrets before sharing.

Below are step-by-step instructions for each major browser, plus general tips on capturing a useful HAR.

General capture tips (applies to all browsers)

  1. Reproduce the problem from a clean start.

    • Clear cache or open a private/incognito window when appropriate.

    • Start recording before you perform the steps that trigger the bug.

  2. Enable "Preserve log" or equivalent when you need redirects or navigation captured.

  3. Make sure to capture the whole user action that causes the issue, not only the final request.

  4. Stop the recording immediately after reproducing the issue to keep the HAR file small and focused.

  5. Inspect HAR contents briefly for obvious secrets like cookies or Authorization headers. Redact before sending to others.

  6. Save the HAR file and name it with the date, browser, and short description, for example 2025-10-03_chrome_login-bug.har.

Chrome (Desktop) and Chromium-based Edge and Opera

Opera and modern Microsoft Edge are Chromium-based. The steps below apply to Chrome, Edge (Chromium), and Opera. Small UI wording differences may exist, but the flow is the same.

  1. Open the browser.

  2. Open DevTools:

    • Windows / Linux: press F12 or Ctrl+Shift+I.

    • macOS: press Command+Option+I.

  3. Go to the Network tab.

  4. If you need to capture activity that happens during navigation, tick Preserve log.

  5. Optionally check Disable cache to avoid cached resources.

  6. Start a fresh capture if the network panel is empty. DevTools starts recording automatically when the panel is open. If not, reload the page.

  7. Reproduce the problem in the browser.

  8. After reproducing the issue, right-click anywhere inside the list of recorded network requests and choose:

    • Save all as HAR with content or download arrow
      If that exact wording is not available, choose Export HAR or Save as HAR. The exported file will usually have a .har extension.

  9. Save the file and inspect it for sensitive data before sharing.

Notes:

  • "Save all as HAR with content" includes response bodies when available, which can make the file large. If you only need headers and timings, a plain HAR without bodies may be adequate.

Firefox (Desktop)

  1. Open Firefox.

  2. Open DevTools:

    • Windows / Linux: press F12 or Ctrl+Shift+I.

    • macOS: press Command+Option+I.

  3. Click the Network tab.

  4. If you need to capture across navigations, enable Persist Logs (similar to Preserve log).

  5. Reload the page or begin your actions. Firefox starts recording network activity automatically.

  6. Reproduce the problem.

  7. When finished, click the small gear icon in the Network panel if you want to change options like Disable cache.

  8. To export the HAR:

    • Right-click inside the list of requests and choose Save All As HAR or Save All As HAR…

    • Alternatively, click the three-dot menu in the Network panel and select Save All As HAR.

  9. Save the .har file and redact any sensitive information before sharing.

Safari (macOS)

Safari requires enabling developer tools first if not already enabled.

  1. Enable the Develop menu (if not already enabled):

    • Open Safari > Settings (or Preferences) > Advanced.

    • At the bottom, check Show Develop menu in menu bar.

  2. Open the Web Inspector:

    • From the menu bar choose Develop > Show Web Inspector, or press Command+Option+I.

  3. Click the Network tab.

  4. Make sure Preserve Log is enabled if you need navigation captured.

  5. Reload the page or perform the actions that reproduce the issue.

  6. After the issue is reproduced, right-click on the list of requests and select Export HAR or use the action button in the Network panel to export. Some Safari versions label it Export then let you pick HAR format.

  7. Save the file with a .har extension. Review for sensitive headers and bodies before sharing.

Notes:

  • In older Safari versions exporting to HAR may be less obvious. Enabling the Network tab and right-clicking a request should offer an export option. If you do not see HAR export in your Safari version, you can copy the relevant requests as cURL commands and share those instead.

Internet Explorer (IE 11 and older)

Internet Explorer is legacy software. If you must capture in IE, use its F12 Developer Tools.

  1. Open Internet Explorer.

  2. Open Developer Tools by pressing F12.

  3. Select the Network tab.

  4. Click the green play or record button if the network tool is not already recording. Some versions start recording immediately when the Network tab is opened.

  5. Reproduce the behavior you want to capture.

  6. After reproduction, click the "Save" icon or look for an option labeled Export not collected sessions or Export captured traffic. In many IE versions you will have a button or menu that allows you to Save the captured network activity to a file. The file might be saved as a .har or .txt depending on the version; if it is not a HAR you may need to convert or use another browser for HAR output.

  7. If the IE Developer Tools cannot export HAR directly, consider capturing with a proxy tool such as Fiddler that can export HAR. If using a proxy, be careful to capture only the relevant traffic.

Notes:

  • IE is deprecated and may not support full HAR export in all versions. When possible, reproduce the issue in a modern browser or use a proxy tool that can produce HARs.

Quick-reference table

Browser DevTools open Preserve log option Export HAR option
Chrome F12 or Ctrl/⌘+Shift+I Network: Preserve log Right-click network list -> Save all as HAR with content
Edge (Chromium) F12 or Ctrl/⌘+Shift+I Network: Preserve log Right-click -> Save all as HAR with content
Opera F12 or Ctrl/⌘+Shift+I Preserve log Right-click -> Save as HAR
Firefox F12 or Ctrl/⌘+Shift+I Persist Logs Right-click -> Save All As HAR
Safari ⌘+Option+I (enable Develop menu first) Preserve Log Right-click or Network panel export -> Export HAR
Internet Explorer F12 Depends on version Save from Network tab; may not be HAR. Use Fiddler if needed

Troubleshooting

  • If no network activity appears, make sure DevTools was open before initiating the action or that recording is enabled.

  • If the problem only happens on a mobile device, use remote debugging tools: Chrome remote debugging for Android, or Safari Web Inspector for iOS. These will also allow HAR captures.

  • If the browser cannot export HAR, use a local proxy such as Fiddler, Charles Proxy or mitmproxy that can capture traffic and export HAR. These tools require installation and additional configuration.

 
If you run into any issues creating a HAR file, please contact the following email addresses, please get in touch with the technical support team: support@trueloyal.com 
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.