Browser DevTools for Rails
Browser DevTools for Rails covers the Network and Console tabs, read to diagnose a Rails app. The Network tab shows every request a page makes, from the document to fingerprinted assets and third-party fonts and libraries. Lessons open a request's Headers, Preview, Response, Initiator and Timing tabs. They read a form_with submission in the Payload tab and match status codes like 302, 422 and 400 to form outcomes. The Console tab is read for JavaScript errors. A final lesson combines Elements, Network and Console into one diagnostic order.
What you'll learn
- ✓Reading the Network tab's request list and its Status, Type, Size and Time columns
- ✓Opening a single request's Headers, Preview, Response, Initiator and Timing tabs
- ✓Reading a Rails form submission and its authenticity_token in the Payload tab
- ✓Matching status codes like 302, 422 and 400 to Rails form outcomes
- ✓Reading JavaScript errors and warnings in the Console tab
- ✓Checking Console, Network and Elements in a useful diagnostic order
DevTools beyond elements
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…
Read the full lesson free →Curriculum
7 lessonsDevTools beyond elements
Introduces the Network and Console tabs and how each one explains a different cause behind the same bug.
The network tab: every request a page makes
Reads every request a Rails page makes, including fingerprinted assets, third-party fonts and CDN libraries, plus key columns.
Clicking into one request
Opens one request to read its Headers, Preview, Response, Initiator and Timing tabs and what each shows.
The payload tab and a real Rails form
Reads a form_with submission in the Payload tab, showing bracketed field names and the authenticity_token sent by the browser.
Status codes you already know, now visible
Shows status codes in the Network tab, including two-row redirects, form outcomes like 302, 422 and 400, and filtering.
The console tab: diagnosis, not just editing
Uses the Console to read JavaScript errors and warnings, the browser-side counterpart to the server's development log.
Elements, network, console: putting it together
Combines Elements, Network and Console into a diagnostic order: Console first, Network second, Elements last.