Where is the browser console and what does it show?

What it actually is

The console is a panel inside your browser’s built-in developer tools. It prints, as plain text, every error and warning the JavaScript running on your page has hit, plus anything the code deliberately logs. It ships inside Chrome, Firefox, Safari, and every other browser, hidden until you open it.

Think of it as a flight recorder for your page. It writes down, in order, every mistake your page’s code makes while it runs, with a file name and line number attached to each one, without stopping or fixing anything. When your screen looks fine but a button quietly does nothing, the console is where the actual failure got written down, even though nothing visibly crashed.

The console sits alongside other panels in the same developer tools window, including Elements and Network, covered below. Console is the one that shows JavaScript problems in words, not the page’s HTML or its data traffic.

Why your AI just did this

Your agent, whether it’s Lovable, Cursor, or Claude Code, writes and runs code on your machine or its own servers, and its own terminal output looks clean when the build succeeds. But a lot of real bugs only happen after that code reaches your browser and runs there: a component that renders with undefined data, a fetch call blocked by CORS, a mismatch that produces a hydration error. None of that reaches the agent’s own logs, because the agent isn’t the one running the page. Your browser is. Asking you to check the console is the agent asking for its eyes into the one place it can’t see directly.

When you’ll run into it

The most common trigger is a page that looks broken with no explanation: a blank white area where content should be, a button that does nothing when clicked, a form that never submits. Open the console and you’ll typically find a red line like Uncaught TypeError: Cannot read properties of undefined (reading 'map'), pointing at the exact file and line that failed.

It also turns up right after your agent adds a console.log() to help debug something. Those lines appear in the console too, in a neutral color, mixed in with any real errors.

Three panels get confused constantly, so here’s each in one line. Console shows JavaScript errors, warnings, and anything logged from code, as text. Network shows every request your page made to a server, its status code, and how long it took, which is where you look when data never arrives. Elements shows the live HTML and CSS of the page as the browser currently renders it, which is where you look when something is visually wrong but no error appeared anywhere.

What to check

• Open the Console directly with Ctrl+Shift+J (Cmd+Option+J on Mac) in Chrome, or Ctrl+Shift+K (Cmd+Option+K on Mac) in Firefox, so you land on it instead of whatever panel you had open last
• On Safari, turn on Safari > Settings > Advanced > Show features for web developers first, then open the Web Inspector and click its Console tab
• Read the color: red is an error worth fixing now, yellow or orange is a warning that usually waits
• Click the small triangle next to an error to expand its stack trace and see the exact file and line it came from
• Copy the actual text, not a screenshot: select the error line, or right-click it for a copy option, then paste the whole thing, including the file path and line number, to your agent
• If the console is empty but something’s still wrong, check the Network tab next for a failed request or a bad status code

Say it like a dev

Instead of: “the button just doesn’t work” Say: “I clicked the button and got this error in the console: [paste the exact red text]. What’s it pointing at?”

Instead of: “here’s a screenshot of the error” Say: “Here’s the exact console error as text: [paste it]. I copied it directly so the wording is exact.”

Instead of: “nothing happened, no error either” Say: “The console shows no errors, but I checked Network and one request came back with a status code in the 400s. Here’s which one.”