Module 3: HTTP & Chrome DevTools#

curl -i 'https://httpbin.org/get?topic=python&module=3'

Check:

• Status: a success response.
• Content-Type: JSON.
• args: both query values appear.

Read the command:

• -i includes response headers.

• Quotes keep the shell from treating & as a background-command operator.

• Client: curl or a browser sends a request.

• Server: returns a response.

• HTTPS: encrypts the transport.

Client -- method + URL + headers + optional body --> Server
Client <-- status + headers + response body -------- Server

• Endpoint: an address that accepts requests.
• API: defines how software can use endpoints.
• JSON: a text data format; {"module":3,"ready":true} contains a number and a boolean.
• JSON syntax: keys and strings use double quotes.

Your turn:

1. Change only topic.
2. Predict which response field changes, then run again.
3. Save and format the body:

cd ~/bridge-lab
curl -sS 'https://httpbin.org/get?topic=linux' -o notes/http-get.json
python3 -m json.tool notes/http-get.json

• -sS: hides progress but shows errors.
• -o: writes the body to a file.
• Check: the formatted args contains "topic": "linux".

If formatting fails:

1. Inspect the file; a service error may return HTML instead of JSON.
2. Record the status/error.
3. Retry later.

Send a JSON body:

curl -i 'https://httpbin.org/post' \
  -H 'Content-Type: application/json' \
  -d '{"learner":"Explorer","module":3}'

• -H: adds a request header.
• -d: supplies a body and selects POST by default.
• Backslashes: continue this command across lines.
• Check: your object appears in the response’s json field.

Try methods#

curl -i -X PUT 'https://httpbin.org/put' -H 'Content-Type: application/json' -d '{"ready":true}'
curl -i -X PATCH 'https://httpbin.org/patch' -H 'Content-Type: application/json' -d '{"topic":"git"}'
curl -i -X DELETE 'https://httpbin.org/delete'

• -X: chooses a method explicitly.
• GET: retrieves data.
• POST: submits data.
• PUT: commonly replaces a resource.
• PATCH: changes part of a resource.
• DELETE: requests removal.
• httpbin: echoes these actions; it does not maintain a learner record.

Predict a response#

curl -i 'https://httpbin.org/status/404'
curl -i 'https://httpbin.org/status/500'
curl -i 'https://httpbin.org/redirect/1'
curl -i -L 'https://httpbin.org/redirect/1'

Check:

1. Compare the two redirect calls.
2. Find the successive response headers shown by -i -L.

Your turn:

1. Record one method, status and echoed field in notes/http.txt.
2. Explain whether 404 is the same as a connection timeout.

Open Chrome’s Network demo.

1. Open DevTools → Network, then reload; each row is a request/resource.
2. Click Get Data on the demo.
3. Filter for getstarted.json and select it.
4. In Headers, find Request URL, Request Method and Status Code.
5. Compare request and response headers.
6. Read Response (raw data), Preview (formatted view) and Timing (timeline).

Check:

• Name the action that caused the request.
• Find one returned value.
• For panel help, use the official tutorial.

Replay your own harmless request#

1. Open Network, then visit https://httpbin.org/get?topic=browser.
2. Select its document request.
3. Right-click → Copy → Copy as cURL.
4. Inspect the command, then run it in your terminal.

• Compare: the endpoint and query match; headers may differ.
• Private requests: commands from signed-in sites may contain cookies/tokens. Do not share them.

Explore suggestions#

1. Open Google Search and clear Network.
2. Type weather in ch without submitting.
3. Inspect new requests for your query and suggestion data.
4. Try Fetch/XHR, then All if needed.

• Record: host/path, method/status and evidence connecting the response to the suggestions.
• Evidence: suggest in a filename is a clue; verify the response data.
• Fallback: results vary by region/session. If no request appears, use the Get Data demo.
• API distinction: an internal endpoint may not be a supported public API.

• Elements: shows the DOM, the browser’s current page representation.

On Google’s homepage:

1. Right-click the logo → Inspect, or use the element picker: Ctrl+Shift+C / Cmd+Option+C.

2. Select the image or its wrapper. Under element.style in Styles, add:

   filter: grayscale(1);
   transform: rotate(-8deg);

3. Uncheck each property to compare its effect.

4. Reload; with normal settings and no local overrides, the edits disappear.

• Check: explain why only your page view changed.
• Fallback: if the doodle is difficult to select, edit a heading in the official DOM demo.

Your turn:

1. Load a page, then disconnect from the network.
2. Edit its style.
3. Explain why editing the existing DOM can work while fetching a new page cannot.