A Guide to HAR Files: Recording and Analyzing Web Requests

Posted on Edited on Word count in article: 1.2k Reading time ≈ 2 mins.
Learn how to use Chrome's HAR files to record and analyze web requests. This guide covers downloading, uploading, and understanding HAR files for effective debugging and troubleshooting.

For ordinary users, Chrome is just a web browser, but it can be considered a productivity tool for developers.

Recently, I couldn’t reproduce a bug. The only clue was an issue at the data level when the user requested data on the page. To verify this, I needed to understand the user’s situation. So, I asked the business contact to access the system using Chrome, download the HAR file, and send it to me. Once I received the file, I quickly identified and resolved the issue.

That’s right, the key point is HAR. Let’s briefly introduce it here.

HAR

The full name is HTTP Archive format, a file format that records network request information.

HAR Upload and Download Operations

Download

While accessing the web, open the console tools, ensure that Chrome is making web requests, and click the download button to save it locally.

Upload

Still in the console, click the upload button and select the HAR file.

Things to Know

  1. The downloaded HAR includes all types of network requests, whether XHR, JS, or CSS.
  2. HAR only records logs, so when uploading, it only restores them and does not make the requests again.
  3. The scope of HAR recorded is limited to what is displayed in the console; if the console is cleared, the downloaded file will also be empty.
  4. HAR can be uploaded on any page.

At the end

This is just a brief introduction, but I want to emphasize that using Chrome effectively can be very effective.

Docs