Chrome生成HAR文件方法及DevTools中Preserve log功能疑问求助

Hey Anna, let me break down your questions with practical details based on my daily experience using Chrome DevTools:

1. How to Generate a HAR File in Chrome? #

Follow these reliable, step-by-step instructions (I’ve used this workflow dozens of times):

• Open Chrome DevTools: Use F12, right-click the page and select Inspect, or use the shortcut Ctrl+Shift+I (Windows/Linux) / Cmd+Opt+I (Mac).
• Switch to the Network tab.
• (Optional but critical for cross-page requests) Check the Preserve log box in the top-left corner of the Network panel.
• Click the Clear icon (a circle with a diagonal line) to wipe existing logs, so you only capture the traffic relevant to your issue.
• Reproduce the action you want to log (e.g., refresh the page, submit a form, trigger the problematic behavior).
• Once all requests are captured, right-click anywhere in the request list in the Network panel.
• Select Save all as HAR with content from the dropdown menu.
• Choose a save location (the file will default to a .har extension) and confirm.

2. Have People Used "Preserve log" When Generating HAR Files? #

Absolutely—this is a standard practice for developers, QA engineers, and support teams. Here are some common use cases I’ve seen (and used myself):

• Troubleshooting login flows with multiple redirects (like OAuth or SSO): Without Preserve log, DevTools clears the log when you’re redirected, so your HAR would miss the critical initial login requests.
• Debugging payment processing issues: When users are sent between multiple domains to complete a payment, enabling this option ensures the HAR captures every step of the redirect chain.
• Diagnosing intermittent page load errors: If an error only happens after navigating away from a page, Preserve log lets you retain the full request history to pinpoint where things went wrong.

3. What Exactly Does "Preserve log" Do, and Is It Used for Generating HAR Files? #

Let’s clarify both points:

• Core Function of "Preserve log": By default, Chrome DevTools clears the Network panel’s log every time the page navigates (refresh, link click, redirect). Enabling Preserve log overrides this—it keeps all previously captured requests visible even after navigation or page reloads.
• Its Role in HAR Generation: It’s not strictly required to generate a HAR file (you can create one without it), but it’s invaluable when you need your HAR to include requests across multiple page loads or redirects. Since the HAR file exports exactly what’s visible in the Network panel, enabling Preserve log ensures you don’t miss any critical requests that occur during navigation.

内容的提问来源于stack exchange，提问作者Anna Lee