https://medium.com/@ConnorFinnegan/how-to-effectively-inspect-network-activity-in-chrome-dev-tools-fd18592a735a

During a recent interview, I was shown a demo of a website and told that a piece of data being displayed was incorrect and did not match the value in the database. I was asked to explain how I would debug this problem and try to find out where the source of the issue was.

We agreed on a debugging process after a brief conversation, but my initial suggestion relied too heavily on console.log()s, and my interviewer encouraged me to make use of the Network panel in the Google Chrome developer tools as well. While I had used the Chrome dev tools to inspect network activity a few times before on a project, this conversation made me realize that it would be worthwhile to take a deeper dive into this portion of the Chrome dev tools to further improve my debugging process. In this blog post, I will share some helpful tips and tricks to make the most of this feature in Chrome.