How to Capture Console Logs and Network Requests Without DevTools
You do not need to manually dig through Chrome DevTools for every bug.
Use Gasoline to collect the same evidence in a structured way.
Quick Terms
Section titled “Quick Terms”- DevTools (Developer Tools): Browser built-in debugging tools. https://developer.chrome.com/docs/devtools/
- HTTP status code: Number that tells whether a request succeeded (
200) or failed (400,500, etc.). https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
Step 1: Capture console errors and warnings
Section titled “Step 1: Capture console errors and warnings”observe({what: "errors"})observe({what: "logs", min_level: "warn"})Step 2: Capture network failures
Section titled “Step 2: Capture network failures”observe({what: "network_waterfall", status_min: 400})This gives you a clean request list with failed calls.
Step 3: Read failing response bodies
Section titled “Step 3: Read failing response bodies”observe({what: "network_bodies", status_min: 400})Now you can see error payloads, not just status codes.
Step 4: Package everything for your team
Section titled “Step 4: Package everything for your team”generate({what: "reproduction"})Why this helps
Section titled “Why this helps”- Less manual clicking
- Easy to repeat
- Easier to compare before/after fix
Image and Diagram Callouts
Section titled “Image and Diagram Callouts”[Image Idea] Failed requests list with corresponding response body.
[Diagram Idea] Data flow: browser event -> logs/network capture -> repro artifact.