Find API Communication in a Browser
Discover where HTTP communication happens behind a real website.
Find the API request made by a website using Chrome DevTools.
HTTP Is Communication
In Lesson 0.1, you learned the visible shape of HTTP:
Now we will find this communication inside a website.
Start With a Website
Imagine that you open a learning website.
REST API MASTERY
Learn REST APIs through hands-on practice.
You can see the website. But the API communication is normally hidden behind this interface.
Open Chrome DevTools
Now we will use the actual Chrome browser interface. You do not need to understand all of DevTools.
Open the website in Google Chrome
First, open the website that you want to investigate.
Keep this page open. We will watch what happens when the browser communicates with a server.
Open Chrome DevTools
There are several ways to open DevTools. For this lesson, the easiest is:
You can also use the keyboard shortcut:
Ctrl + Shift + IDevTools will appear attached to the browser window.
Look at the DevTools tabs
DevTools contains several panels. You may see tabs such as:
Do not worry about the other tabs.
Network
Click Network
Click the Network tab.
The Network panel records network activity from the page.
Now use the website
Keep the Network panel open. Then perform an action on the website.
For example, click a button that loads lessons, products, comments, or other data.
Watch the request appear
After the action, new rows may appear in the Network panel.
| Name | Type | Status |
|---|---|---|
| index.html | document | 200 |
| app.js | script | 200 |
| lessons | fetch | 200 |
A request related to the action we just performed.
The whole GUI workflow
You are using DevTools as a window to see HTTP communication that normally stays behind the website.
Simulate the Website Action
In a real website, you would perform an action while the Network panel is open.
Find the New Request
Look at the simulated Network panel. The request related to our action is:
| Name | Type | Status |
|---|---|---|
| index.html | document | 200 |
| app.js | script | 200 |
| lessons | fetch | 200 |
Try it: Click the lessons request above.
The website action caused the browser to request data from an API.
What Did We Actually Find?
The important discovery is not the DevTools interface.
See the Hidden Communication
DevTools gives you a window into this communication.
Remember These 3 Things
Right-click the page → Inspect.
Network shows the browser's network activity.
Watch for the request caused by that action.
Lesson 0.3 — Read Request and Response Details
You have now learned how to find the request. Next, you will learn how to read what is inside it.