2.1.1: Chrome DevTools Network Panel

Learning Objectives

  1. Know how to inspect network requests and responses in Chrome


Chrome and other modern browsers provide convenient functionality for analysing network requests and responses. This will help us debug our apps when our frontends do not receive the data we expect from our backends.


Open Chrome DevTools. The following image shows the DevTools Network panel after we send a request to google.com. Notice there are many more requests than the initial google.com request. These secondary requests are typically for scripts, images and other resources the page needs to function.

Click on an individual request to inspect its details. The Headers tab shows important request and response headers such as URL, HTTP method and response status code. The Response tab shows response data. Both are helpful in determining whether a bug is in our frontend or backend logic.

Disable Cache

Rocket recommends disabling Chrome's cache when DevTools is open to avoid situations when our apps do not reflect recent code changes due to caching. We recommend keeping this checkbox checked permanently to save us time during development.

Last updated