Tutorial

Pro tip: the developer console

The developer console is a built-in tool in every browser that shows you what's happening behind the scenes of your webpage — including errors. Once you know how to use it, you can spot and fix issues much faster.

Opening the console

In Chrome (or any browser):

  • Mac: ⌘ + Option + J
  • Windows: Ctrl + Shift + J

A panel will open, usually at the bottom or side of the browser. Click the Console tab if it's not already selected.

What you're looking for

Red text = errors. If you see red text, that means something is broken on your page.

Common errors you might see:

  • Failed to load resource — a file (like an image or font) couldn't be found
  • Uncaught ReferenceError — JavaScript trying to use something that doesn't exist
  • 404 Not Found — a URL in your code is pointing to the wrong place

The workflow

  1. Open your webpage in Chrome
  2. Open the developer console (⌘+Option+J)
  3. Take a screenshot of any red errors
  4. Paste the screenshot into Claude Code with a message like: "I'm seeing these errors in my browser console. Can you fix them?"

Claude will read the error messages and trace them back to the problem in your code.

You don't need to understand the errors

You just need to find them and hand them to Claude. Reading console errors fluently takes years of experience. Copying and pasting them takes 10 seconds. That's the power of this approach.

Once you've tried opening the console and had a look around, mark this done. You're almost at the finish line.