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 ?
- Go to webpage right click and select inspect or press F12
- Go to network tab
- Click the export button or label.
How to access or open this file ?
- har file can open in any text file
- can import to the same empty browser tab. By doing inspect element -> Network tab -> Import
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.
Top comments (1)
look at harstud.io should help with more advanced features around the analysis.