DEV Community

Cover image for How to troubleshoot browser network call using har file ?
Avinash Dalvi for This is Learning

Posted on • Originally published at internetkatta.com

6 2

How to troubleshoot browser network call using har file ?

Hello Devs,

In this blog we will learn about how to get API network log and debug those for triaging issues if any. Few days back my client was facing some issues with the website. On this issue I wasn't able to debug on the client machine. For this I ask the client to export the .har file from the chrome browser network call tab. Then I used that file to triage issues and it helped me to triage requests and responses for particular use cases.

Let's see what is the .har file and what is it ?

What is the .har file format ?

har is a short form of HTTP ARchive format, which tracks all network logs from the browser console ( chrome, firefox, safari ). This can be used to troubleshooting follow issues :

  • Performance issue
  • Triage API request and response
  • Page rendering

Below are the HAR files generated depending on the browser variant you are using.

  • Chrome
  • Firefox
  • Internet Explorer
  • Microsoft Edge
  • Safari

How to get this har file ?

  1. Go to webpage right click and select inspect or press F12 Screenshot 2022-07-08 at 11.54.54 PM.png
  2. Go to network tab
  3. Click the export button or label. Screenshot 2022-07-08 at 11.56.42 PM.png

How to access or open this file ?

  1. har file can open in any text file
  2. can import to the same empty browser tab. By doing inspect element -> Network tab -> Import Screenshot 2022-07-09 at 12.03.49 AM.png

How does this help ?

This file helps us to debug or troubleshoot API request call request and response. After importing this API calls look exactly similar to the way it shows while loading the page. It includes everything: wait time, response time, initiator etc.

I hope this blog helps you to troubleshoot such issues if you come across them. Feel free to reach out to me on my twitter handle @aviboy2006 or comment in the blog. If you like my blog please don't forget to like the article. It will encourage me to write more helpful articles.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

Collapse
 
coreder profile image
Coreder • Edited

look at harstud.io should help with more advanced features around the analysis.

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay