Browser developer tools

02The file, the tree, and the network list

The source record and devtools-demo.html contain the same HTML. The paragraph has id="hours": id gives that element a name that tools or scripts can select. Its text says the practice room opens at four. The <link> element names desk.css, a stylesheet containing rules for appearance.

The Network panel lists resources a page requests. A stylesheet named in HTML is evidence of a link, while a Network record would show whether a request actually happened and how it ended. The lesson supplies markup, not a new Network capture. The Console runs JavaScript in the page; it is unnecessary here. Never paste unfamiliar console code just to inspect text.

03Compare the file with a local edit

First complete the printed trace. A later desktop run may repeat it on the downloaded owned file: keep desk.css beside devtools-demo.html, open that HTML file, right-click its paragraph and choose Inspect. Use the browser menu for Developer Tools if the shortcut differs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Desk note</title>
  <link rel="stylesheet" href="desk.css">
</head>
<body>
  <h1>Desk note</h1>
  <p id="hours">The practice room opens at four.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Desk note</title>
  <link rel="stylesheet" href="desk.css">
</head>
<body>
  <h1>Desk note</h1>
  <p id="hours">The practice room opens at four.</p>
</body>
</html>

body {
  font-family: sans-serif;
}

1. Read source.txt and copy the paragraph’s original text into notes. Name the stylesheet from href="desk.css"; href is the linked resource’s address.
2. In a paper trace, replace four with nine only in the current-tree column. Leave the saved-file column at four. If using the optional inspector, edit only the paragraph text in the live tree.
3. Predict a reload before checking: reading the unchanged source rebuilds the paragraph with four. Compare the file and tree columns to explain why.
4. Stop after the comparison. Close the owned tab and tools after optional practice; this activity requires no Console commands or other website.

04Optional challenge

For about ten optional minutes, draw two boxes named saved file and live DOM. Place the four → nine edit in the DOM box and reload as an arrow from the file. Your explanation should show why a screenshot of nine cannot establish what is saved.

05Optional Kali appendix

Kali is a Linux distribution assembled for security work. Tools bundled with a distribution do not grant permission to use them on a target. The Ubuntu guest introduced in Computers remains enough; you can finish this stage without any guest.

If you later choose Kali, follow its current virtualization instructions in a separate disposable guest. Reuse the guest boundaries from Computers: NAT without forwarding, no shared folders or clipboard, and a powered-off snapshot before changes. Check the official image and checksum instructions at that time. A snapshot restores the recorded guest state; it does not undo changes to the host.

Optional appendix. Not a required install. Ubuntu is enough for every checkpoint in this stage.

What Kali is
Kali is a Linux distribution aimed at security testing. It bundles many tools. A bundle does not grant a target, and it does not replace the Ubuntu guest from Stage 02.

If you later choose a second guest
- Use a disposable guest, not your everyday system.
- Follow Kali's current virtualization page for the hypervisor you already learned. No checksum is supplied here; verify the current official image before installing it.
- Reuse the Stage 02 boundaries: NAT, no port forwarding, no shared folders, and no shared clipboard.
- Take a snapshot while the guest is powered off, before you change it. That snapshot restores the guest state it recorded. It does not rewind the host.
- Keep any lab browser, proxy, or certificate inside that guest.

Stop
If the grant is missing, stop. If a download page and the file you received disagree with a checksum you checked yourself, stop. This checklist does not supply a checksum.

06Fresh cases for the checks

Use these fictional cases for the checks below. They have different inputs from the worked examples. Read them here or make notes; no installation or external service is needed.

Saved file lobby.html: <p>Meet by the east door.</p>
At T1 the page is loaded from this file.
At T2 an Elements edit replaces east with west in the current DOM only.
At T3 the tab reloads from the unchanged saved file. No save or server update occurs.

Document filename: board.html
<link rel="stylesheet" href="board.css">
<p id="notice">Bring a badge.</p>
No Network capture accompanies this markup.

07Explain your evidence

Optional written self-check: explain one decision using the supplied case. No tool run is required.

Check your explanation: separate saved HTML from the live tree; identify the action that changes each; trace reload; distinguish a resource link from a captured request.