Demystifying HAR Files: Creation, Collection, and Analysis for Web Application Triage

In the intricate world of web development and troubleshooting, understanding the network activities of web applications is crucial. Herein lies the significance of HTTP Archive (HAR) files, a powerful tool in the arsenal of developers, QA engineers, and IT specialists. HAR files provide a comprehensive snapshot of a web browser’s interactions with a site, capturing detailed information about each request and response exchanged between the client and server. This article guides you through creating, collecting, and analyzing HAR files to efficiently triage web applications.

What are HAR Files?

HAR files, standardized by the W3C, document the journey of web requests from initiation to response, encapsulating details such as headers, cookies, payload data, and timing information. This makes them invaluable for diagnosing network-related issues, performance bottlenecks, and unexpected behavior in web applications.

Creating and Collecting HAR Files

The process of generating HAR files is straightforward, with most modern web browsers (e.g., Chrome, Firefox, Safari) providing built-in tools or extensions to facilitate this task. Here’s how you can create a HAR file using Google Chrome’s Developer Tools:

1. Open Developer Tools: Navigate to the web page you wish to analyze, right-click anywhere on the page, and select “Inspect” or use the shortcut Ctrl+Shift+I (Cmd+Option+I on Mac) to open the Developer Tools.
2. Access the Network Tab: Click on the “Network” tab to start capturing network activity. Ensure the record button (the red circle at the top-left of the Network tab) is active. If it’s grayed out, click it to start recording.
3. Reproduce the Issue: With recording in progress, reproduce the issue or complete the actions you want to analyze. The Network tab will capture and list all network requests and responses.
4. Save as HAR File: Right-click within the Network tab, select “Save all as HAR with content,” and choose your desired save location.

Analyzing HAR Files

Once you have a HAR file, the next step is to analyze its contents to identify potential issues or areas for optimization. Several tools and methodologies can aid in this analysis:

• Manual Analysis: Open the HAR file with a text editor to manually inspect the JSON-formatted content. This approach is best for experienced developers familiar with network requests and responses.
• Online Analyzers: Tools like Google’s HAR Analyzer or software like Charles and Fiddler offer user-friendly interfaces to import and scrutinize HAR files. These platforms highlight critical insights such as slow-loading resources, failed requests, and excessive DNS lookups. See https://toolbox.googleapps.com/apps/har_analyzer/
• Custom Scripts: For advanced analysis, custom scripts can parse HAR files, aggregating data, and identifying patterns. Python, with libraries such as haralyzer, can automate this process, offering deeper insights into performance metrics and anomalies.

Best Practices for HAR Files

• Privacy Consideration: HAR files can contain sensitive data, including cookies, API keys, and personal information. Always sanitize HAR files before sharing and only distribute them in a secure manner.
• Comprehensive Collection: To ensure a thorough analysis, capture HAR files across different browsers and devices. This diversity can uncover browser-specific issues or device-related performance problems.
• Regular Audits: Incorporate HAR file analysis into your regular web application audit routines. This practice helps in proactively identifying and mitigating potential issues before they impact end-users.

Conclusion

HAR files are a linchpin in the web development toolkit, offering a detailed lens through which to view the web application’s network activity. By mastering the creation, collection, and analysis of HAR files, professionals can enhance their ability to triage, optimize, and secure web applications. As web technologies evolve, the role of HAR files in ensuring seamless, efficient, and secure web experiences remains undiminished, making them an essential skill for web professionals.

Below are some brief instructions for each browser:

You can generate a HAR file within most web browsers using the built-in developer or inspector tools.

1. Go to View > Developer > Developers Tools or Right-Click the mouse and select “Inspect”.
2. In the Developer Tools pane, choose the Network tab.
3. Check the Preserve Log checkbox to record all interactions.
4. Visit the page and complete the steps that trigger the issue.
5. Choose the Network tab.
6. Click the down arrow to export the HAR file.
7. Save the HAR file.

1. Ensure that Show Develop menu in menu bar checkbox is checked under Safari > Preferences > Advanced.
2. Choose File > Open New Private Window.
3. Choose Show Web Inspector in the Developer menu, then navigate to the Network tab.
4. To the right of All near the top-left of the Web Inspector, click the Filter button and choose Preserve Log.
5. Visit the web page where the issue occurs.
6. Choose Develop > Show Web Inspector. The Web Inspector window appears.
7. Complete the steps on the page that trigger the issue.
8. Select the Network tab.
9. Click Export on the upper right side of the pane.
10. Save the HAR file.

1. Close all private windows in Firefox.
2. Open a new private window in Firefox.
3. Go to Tools > Developer > Network (Ctrl + Shift + E).
4. Click the Network tab and choose Persist Logs.
5. Visit the page and complete the steps that trigger the issue.
6. Choose the Network tab and right click and then select Save All As Har.
7. Save the HAR file.

1. Close all InPrivate windows in Microsoft Edge.
2. Open a new InPrivate window (Ctrl + Shift + N).
3. Go to Settings and more (the … icon) then choose More Tools > Developer Tools.
4. Start a profiling session on the Network tab of the Developer Tools toolbar.
5. Visit the page and complete the steps that trigger the issue.
6. Select Export as HAR (Ctrl + S) and save the HAR file.

1. Close all InPrivate windows in Internet Explorer.
2. Open a new InPrivate window in Internet Explorer (Ctrl + Shift + P).
3. Go to Tools > F12 Developer Options > Network.
4. Ensure Clear entries on navigate is switched off.
5. Visit the page and complete the steps that trigger the issue.
6. Choose the Network tab and select Export as HAR (Ctrl + S).
7. Save the HAR file.

About The Author

Rami Jaloudi

Rami Jaloudi has been a dynamic force in Systems Engineering since 2008, specializing in eDiscovery, Data Mining, and Development, with a strong emphasis on innovation and programming. His approach to technology focuses on crafting cutting-edge solutions that transform complex data challenges into actionable insights, thereby enhancing operations and decision-making processes. Jaloudi’s expertise spans across various programming languages and frameworks, enabling him to lead scalable and innovative projects.

His contributions go beyond mere technical excellence; Jaloudi is instrumental in pioneering advancements that redefine how technology can serve businesses and society. He has earned accolades not just for his defensive strategies against cyber threats but more so for his forward-thinking in optimizing network efficiency and functionality. Through his blog, https://docengines.com, Jaloudi shares his wealth of knowledge, offering insights, tutorials, and the latest trends that encourage the tech community to embrace and contribute to the digital era with confidence.

Jaloudi is dedicated to demystifying technology, making it more accessible, and promoting a culture of continuous learning and innovation. His work exemplifies his commitment to pushing the boundaries of what’s possible in technology, thereby inspiring the next generation of technologists to pursue innovation with zeal. In doing so, Jaloudi stands out in propelling the tech industry forward, underscoring his role not just as an engineer, but as a visionary leader in the digital age.

“In the digital realm, true progress is measured not by what we hoard, but by what we share. Be selfless in your digital pursuit of happiness”.

See author's posts