Browser Developer Tools
The single most important debugging skill for every web developer — understanding where to look when something goes wrong.
Every bug you will ever chase as a web developer lives in one of three places. Once you know where to look, debugging stops feeling like guesswork and starts feeling like investigation.
The Three Places Every Bug Hides
- Console tab — JavaScript errors and your
console.log()output - Network tab — API call failures (your app talking to Supabase)
- React DevTools — component state and prop problems
Master these three and you can debug 95% of issues without help.
Why First: The Moment You'll Wish You Knew This
Picture this. You are a CA who has just built your first client portal. A form where clients submit documents for review. You deploy it, send the link to your first client. They fill the form and click Submit.
Nothing happens.
No error message. No success message. The button just... sits there. You have no idea what went wrong.
This is the moment every developer faces. And here is the difference between someone who spends three hours guessing versus someone who finds the answer in three minutes: the three-minute person opened DevTools immediately.
Without DevTools, you are staring at a finished dashboard and guessing what's broken underneath.
With DevTools, you can see every error message, every network call, every piece of data — in real time.
The Excel Analogy That Makes This Click
In Excel, when a formula returns #REF! or #VALUE!, you use formula auditing mode — you click "Trace Precedents" or "Evaluate Formula" to see exactly what went wrong at each step. Excel shows you the calculation happening behind the formatted cell.
DevTools is the same thing for your web app.
Your app shows the user a beautiful dashboard. DevTools shows you everything happening behind that surface — the data flowing in, the JavaScript executing, the API calls going out and coming back. You are looking at the formula, not just the result.
| Excel Tool | DevTools Equivalent | What It Shows |
|---|---|---|
| Formula Auditing → Evaluate Formula | Console tab | JavaScript errors, step-by-step execution |
| Formula Auditing → Trace Dependents | Network tab | What data your app is requesting |
| Conditional Formatting rules panel | Elements → Styles panel | CSS rules applied to any element |
| Name Manager | React DevTools Components | All named variables (state, props) in your app |
| F9 to recalculate | Page refresh (F5) | Re-run everything from scratch |
What Chrome DevTools Is
Chrome DevTools is a set of tools built directly into Google Chrome (and every Chromium-based browser — Edge, Brave, Arc). You do not install it. It is always there, waiting.
It gives you:
- Live view of your app's HTML structure — every element on the page, its CSS, its dimensions
- JavaScript console — see errors, run code interactively, inspect variables
- Network monitor — every request your app makes to any server, with full request and response details
- Performance profiler — find what's making your app slow
- Application storage inspector — see cookies, localStorage, cached data
- Mobile device simulator — test your app as if you were on an iPhone or Android phone
You will use it every single day. It is not an advanced tool for experts — it is the first tool every developer reaches for when something doesn't work.
The Three Tabs You Will Live In
Console
Your app's output. Red = error, yellow = warning, white = your console.log(). This is where JavaScript crashes are reported with a file name and line number.
Network
Every HTTP request your app makes — to Supabase, to any API, to any server. Shows status codes, what was sent, what came back. The answer to 'why isn't my data loading?' is almost always here.
Elements
The live HTML and CSS of your page. Click any element to see every CSS rule applied to it and where it comes from. Essential for fixing layout and styling problems.
There are more tabs — Sources (JavaScript debugger), Performance, Memory, Application — but you will use those occasionally. Console, Network, and Elements are your daily tools.
The Mindset Shift
Most beginners, when something breaks, start changing code randomly and refreshing the page. They are guessing.
DevTools changes this completely. Before you change a single line of code, you open DevTools and look. The error is usually printed in plain English in the Console. The failing network request is sitting in the Network tab showing you exactly what went wrong.
The habit is:
Something broke → Open DevTools → Read what it says → Then fix it
Never the other way around.
What's Coming in This Module
Opening DevTools
Keyboard shortcuts, docking options, the mobile device simulator.
Console Tab
Reading errors, using console.log(), stack traces, the interactive REPL.
Network Tab
Finding your Supabase calls, reading responses, understanding status codes.
Elements Tab
Inspecting HTML, reading the Styles panel, understanding the Box Model.
React DevTools
The browser extension that shows your component tree, props, and state.
Common Errors
The 10 errors you will see most often, what they mean, and how to fix them.
Verification Checklist
How to confirm you can actually use these tools before moving on.