2.1.1: Chrome DevTools Network Panel

Learning Objectives

  1. 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 Notice there are many more requests than the initial request. These secondary requests are typically for scripts, images and other resources the page needs to function.
The Network panel shows a list of requests from this browser in increasing chronological order. Source: Rocket Academy
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.
Clicking on an individual request shows us that request's details. Source: Rocket Academy

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.