Hey, howdy, hallo,
Between the various jobs I’ve had and software I’ve written/I’m writing, I’ve become intimately familiar with the Developer Tools panel in browsers. But you don’t have to be a developer to use them. I think they are the best way to get a glimpse into how web pages work. This can be useful from a security/privacy perspective or for troubleshooting, but it’s also just interesting.
Things get a little technical below, but my goal is to trigger some curiosity. I don’t think enough people are curious about everyday life, so let this be your push to get curious!
This works best from a desktop/laptop computer. If you’ve ever right-clicked on a web page, then you’ve seen the option to access Developer Tools.
Chromium-based browsers/Firefox: Right-click > Inspect
You’ll then see a section pop up on the right side of your screen (default positioning). I don’t like it on the side, so I like to move it to the bottom. On Firefox, click the three horizontal dots next to the X and click Dock to bottom. On Chromium-based browsers, click the three vertical dots next to the X icon, then in the Dock side section select Dock to bottom icon.
The first tab that will be selected when opening Developer Tools is Elements in Chromium-based browsers or Inspector in Firefox. It shows the webpage structure and details. This is useful if you’re doing design work or want to see the page structure, but I’m not going to cover that today.
Have you ever been on a web page and a button doesn’t work? Or you see some weird behavior and wonder what is happening? If the developer or site admin has any logging, or there is some generic browser logging providing details for the error, you’ll see this on the Console tab. That’s the tab to the right; click on that. You might see some logs there already. Check them out, run a search on them, and eventually you’ll start to recognize some patterns. It’s extremely helpful when I’m on a random website to figure out if the thing I’m trying to do is broken because the website’s broken, or because my computer is blocking something.
Network tabNow to me, the most interesting tab is the Network tab. Once you’re done checking the Console, click on that one. This tab shows the network requests your browser is making. While on the front end you might see pretty buttons, boxes, sliders, and text boxes, a lot of that is backed by network requests, and interactions with those elements can trigger more requests. That’s how your browser communicates with the server hosting the website. There’s a TON to cover on this tab, but I want to point out a few things to get you started.
Take a look at the Method column. In there, keep a lookout for GET and POST. These are two different types of HTTP request methods. GET, as the name implies, gets something. So when you load a page, you’ll see a bunch of GET requests show up here as the browser loads website data, images, scripts, and other resources. You can click on one to see more details about it.
When you click on a request, the first tab selected is Headers. You can scroll through this to see all the Response Headers from the server and, below that, all the Request Headers your browser sent.
Example Request Headers
GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Linux; Android 8.1.0; ZTE Blade A3 2019) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.101 Mobile Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br, zstd
Connection: keep-alive
Referer: https://www.example.com/
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Pragma: no-cache
Cache-Control: no-cache
Example Response Headers
HTTP/1.1 200 OK
date: Sun, 31 May 2026 18:59:39 GMT
content-type: text/html; charset=UTF-8
server: cloudflare
vary: Accept-Encoding
access-control-allow-origin: https://www.example.com
expires: Thu, 19 Nov 1981 08:52:00 GMT
pragma: no-cache
x-cacheable: SHORT
cache-control: max-age=600, must-revalidate
x-cache: HIT: 174
x-cache-group: normal
cf-cache-status: DYNAMIC
content-encoding: br
cf-ray: a048378a9fb5c984-IAD
alt-svc: h3=":443"; ma=86400
server-timing: cfExtPri
On that same details screen, click the Response tab. This is the data the server sent back to your browser when you made the GET request. If you look through that, you’ll start to see some of the data you see rendered on the page. It gives you a glimpse into how the service you’re using formats your data and how it sends it back to your browser.
Next up are POST requests. This is when your browser needs to send data to the server. You may not see them as often on a plain page load, since you aren’t always sending data to a website. But if you want to see an example of one, either pick a site and type a fake email/password into the login box and look for the POST, or type some data into a form and submit it. Once you see the request with method POST, click on it. Again, you’ll see the Headers tab with the same details we saw on the GET request. Now click on the Payload tab in Chromium-based browsers or the Request tab in Firefox, and you’ll see the data you sent. In my case, here’s what it looks like for the username and password I sent to the site.
username
[email protected]
password
hereismypassword
Then click the next tab over, which is Response, and you’ll see the response the server sent:
{
"status": "ERROR",
"error": "Your username or password is incorrect.",
"errorcode": -1
}
The error message above is exactly what I see printed to the page.
Network traffic is one of my favorite things to talk about. Most things we do on computers and phones are just layers of abstraction over requests being sent back and forth. So the more you understand that traffic, the more you understand what’s actually happening underneath the surface.
I hope you had a great May, and I’ll see you in June!
-Josh
Kagi has a neat "Small Web" site that helps surface recent posts from smaller, human-made websites. It’s a great way to find some gems.
How to Flash Stock Android on Google Pixel
GrapheneOS/Android App Permissions Explained
A few things I make and work on:
Membership Site — Bonus content, monthly livestream Q&A, and more.
Consulting — Personalized help for individuals and teams.
Yellowball — Podcast hosting. No BS, no tracking.
"I wish there was a way to know you’re in "the good old days", before you’ve actually left them."
— The Office (S09E24/E25)