DevTools beyond elements

One tool, already half-covered

The "DOM basics" course spent a full lesson inside DevTools. It opened the Elements panel, hovered nodes to highlight them, edited text live, and showed that View Source shows frozen HTML while Inspect shows the live DOM. That lesson's job was the DOM. This course covers the two tabs next to Elements, Network and Console, read for diagnosing a Rails app.

Why these two deserve their own course

Elements shows what a page is, structurally, right now. Network shows what a page asked for (every file, every request) and what came back. Console shows what the page's JavaScript is saying: errors, warnings, deliberate log messages. A bug that looks the same in Elements, a broken layout say, can have a different cause depending on which tab explains it: a failed request, or a JavaScript exception.

What this course covers

1. The Network tab's request list, read against this project's own real, live page.
2. What clicking a single request reveals, verified against Chrome's own current documentation.
3. The Payload tab specifically, and a real Rails form submission's actual request body.
4. Status codes, already covered as HTTP concepts, now seen for real in this exact tab.
5. The Console tab, read for diagnosis rather than for the live editing "DOM basics" showed.
6. Putting Elements, Network and Console together, and what comes next.