The browser and developer tools

Your browser ships with a full set of inspection tools. For web security they are the first instrument you reach for: they show you every request, let you read and change the page, and reveal what the site stores about you. Open them with F12 (or Ctrl+Shift+I).

The Network tab

The Network tab lists every request the page made — exactly the HTTP messages from the last lesson. Reload a page and each row is one request: click it to see its method, headers, body and the server response.

Review questionWhich developer-tools tab shows the HTTP requests a page sends?

ConsoleNetworkElements

Check

Elements and the DOM

The Elements tab shows the live DOMThe Document Object Model: the browser's in-memory tree of the page. JavaScript reads and changes the DOM, and what you see is the DOM, not the original HTML file.. You can edit any element on the spot and watch the page change. That change is only in your own browser — it never reaches the server — but it is how you confirm, for example, that a “disabled” button was only disabled in the page, not on the server.

Storage and the Console

The Application (or Storage) tab shows cookies, localStorage and sessionStorage — where the site keeps your session and settings. The Console runs JavaScript against the current page, so you can read those values or call the page’s own functions.

Review questionYou delete a 'disabled' attribute from a button in the Elements tab and it becomes clickable. What have you actually changed?

The server will now accept the actionOnly your own view of the page; the server still decidesNothing, the edit is ignored

Check