# 2.1.1: Chrome DevTools Network Panel

## Learning Objectives

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

## Introduction

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.

## Usage

[Open Chrome DevTools](https://developer.chrome.com/docs/devtools/open/). 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.

![The Network panel shows a list of requests from this browser in increasing chronological order. Source: Rocket Academy](https://content.gitbook.com/content/r6JTCGA7qX8Uv7DKbYMQ/blobs/aKVhRIg4WEyEdRpFLduy/2.1.1%20-%20Network%20Panel.png)

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](https://content.gitbook.com/content/r6JTCGA7qX8Uv7DKbYMQ/blobs/BRIunM3zmdcF29DlPbDz/2.1.1%20-%20Network%20Panel%20Headers.png)

## Disable Cache

Rocket recommends [disabling Chrome's cache when DevTools is open](https://stackoverflow.com/a/7000899) 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.