Skip to content
Book a callSkip the hiring grind

Day 44 of 52 · about 20 min · MCP · Bonus

Let Claude test your web app in Chrome

For UI work, Claude can’t tell from the code alone whether a page works. Connected to Chrome, it opens the page, reads the console, and checks its own fix in the browser before calling the work done.

You’ll finish with

  • Claude Code connected to your browser, checked with /chrome
  • A report on your local page and its console errors
  • A fix that Claude checked in the browser

You’ll need

  • A Pro, Max, Team or Enterprise plan, signed in with /login. With an API key, Chrome integration stays off.
  • Chrome, Edge or another Chromium browser with the Claude in Chrome extension 1.0.36 or later. Not supported in WSL.
  • A web app you can run locally, or any public page
Start from the practice project as of Day 35 (.zip, 46 KB)

Before you start

Tell us about your setup and the steps change to fit it. Your answers stay in this browser, and you can change them at any time.

Which system are you on?

Commands differ between systems. Pick the one you’ll run Claude Code on.

The steps

One step at a time. When a step’s check matches, tick it and the next one opens.

0 of 3 steps done0%

  1. Step 1 of 3: Start Claude Code with Chrome

    Launch with --chrome. The first time, a dialog explains site permissions.

    For macOS and Linux

    Terminal

    Run: claude --chrome

    What happens: The first time, a one-time dialog explains site permissions. Press Enter.

    --chrome connects the browser for this session.

    For Windows

    PowerShell

    Run: claude --chrome

    What happens: The first time, a one-time dialog explains site permissions. Press Enter.

    --chrome connects the browser for this session.

    For WSL

    PowerShell

    What happens: Chrome integration isn’t supported in WSL. Run Claude Code from Windows PowerShell for this day.

    Run: claude --chrome

    Use the Windows install of Claude Code, not the one inside WSL.

    Check it worked

    Run /chrome. The panel shows "Status: Enabled" and "Extension: Installed".

    If it didn’t work

    The extension shows Not detected

    Enable it in chrome://extensions. After the first setup, restart Chrome, then choose Reconnect extension in /chrome.

  2. Step 2 of 3: Have Claude open your page

    Start your app, then ask Claude to open it, read the console and report.

    Start your dev server first, for example with npm run dev, and note its local address.

    In Claude Code

    You type: Open http://localhost:3000 in Chrome. Check the page loads, read the console for errors, and tell me what you see. Don’t change any code yet.

    What happens: A dialog starting Claude in Chrome wants to asks first. You can allow this site for the session.

    What happens: At a login page or CAPTCHA, Claude pauses and asks you to handle it.

    Use your own address. No app? Ask it to open code.claude.com/docs instead.

    Check it worked

    A new Chrome tab opens, and Claude describes the page and any console errors.

  3. Step 3 of 3: Let Claude fix it and look again

    Ask for the fix and a fresh look in the browser before it calls the work done.
    Paste into Claude Code
    Fix the console errors you found. Then reload the page, read the console again, and tell me what changed.

    In order:

    1. Claude

      Edits the code

    2. Tool

      Reloads the page in Chrome

    3. Claude

      Reads the console again

    • If errors remain

      Claude keeps fixing

      Or tells you what it can’t fix

    • If the console is clean

      Claude reports the change

    The browser is Claude’s check for UI work, as tests are for code.

    Check it worked

    Claude reports the reloaded page: a clean console, or the errors still left.

Finish · 3 of 3 steps to go

Claude checks its UI work in a real browser

Browser tools add to context, so start with --chrome when you do UI work rather than turning on Enabled by default.

What you’ll have checked

  • /chrome shows the extension installed
  • Claude reported your page after its fix

Lesson updates by email

Get lesson updates by email

Leave your email and we’ll tell you when we add or update a lesson.

We’ll email you when we add or update a lesson. We use your email only for this. Privacy policy

Claude Code for your team

Want Claude Code set up across your team?

HorizonLux sets up and repairs Claude Code for teams: CLAUDE.md rules, hooks that enforce them and reviewed MCP servers. Book a free call to talk it through.

Book a free call Claude Code agency

Related

How we build

AI software factory

Questions

Questions about Day 44

Is it safe to let Claude use my browser?

It shares your browser’s logins, so it can reach any site you are signed into. Allow sites one at a time, and manage them in the extension’s settings.

Sources

Checked against the official Claude Code docs on .

Independent resource, not affiliated with Anthropic. HorizonLux wrote this lesson; Claude Code is made by Anthropic.