Browser Debugging
Browser Console Debugging Guide
Use the browser console to capture JavaScript errors, CSP messages, failed resources and runtime context without guessing. This reference is written as a practical operating note for developers, DBAs and platform teams who need to make the next troubleshooting step visible.
Use it with the live Formalint tools, then keep the final finding in a ticket, release note or runbook so the next person can repeat the same checks.
Good fit for
- A button does nothing in production.
- A script works locally but fails after deployment.
- A CSP, CORS or missing-file message appears only in the browser.
Practical workflow
| Step | What to verify |
|---|---|
| Preserve the first error | Reload the page with the console open and capture the first red error before clicking around. |
| Separate warnings | Warnings can matter, but fix blocking exceptions and failed resources first. |
| Check the source link | Open the linked file and line number, then compare it with the deployed commit. |
| Write a reproducible note | Include browser, URL, timestamp, action and exact error message. |
Command or evidence sample
console.table({ page: location.href, userAgent: navigator.userAgent, time: new Date().toISOString() })Quality checklist
- Confirm the public URL, browser, terminal, deployment or Search Console context.
- Capture the first useful error, header, status, sitemap entry or metric before editing.
- Keep secrets, tokens, cookies and private user data out of copied examples.
- Make one meaningful fix, publish it, then verify the live page rather than the local preview.
- Link the page to related Formalint references so visitors and crawlers can understand the topic cluster.
Common mistake
The common mistake is screenshotting the last error while the first error already explains why everything after it failed.
Formalint's rule for this topic: improve the page because it helps a real developer, then let Search Console observe the improvement naturally.
Related Formalint references
Continue with JavaScript Error Stack Trace, Csp Debugging Guide, DevTools Network Tab Debugging.
Frequently asked questions
Should this be checked after every release?
Check it whenever the related page, deployment path, crawler signal, browser behavior or user-facing workflow changes in a meaningful way.
Can I use sensitive production data in examples?
No. Redact secrets and personal data before copying commands, URLs, payloads, logs or screenshots into a public tool or support note.