Use Claude Code in VS Code with @-mentions and connect Chrome for browser automation
Claude Code isn't just a terminal tool. It integrates deeply with VS Code and Chrome, giving you graphical interfaces and browser automation capabilities.
Extensions view → search "Claude Code" → Install. Requires VS Code 1.98.0+.
The VS Code extension gives you a graphical chat panel with rich features:
| Feature | Description |
|---|---|
| Permission modes | Click mode indicator to switch |
| Command menu | Type / for commands |
| Context indicator | Shows context window usage |
| Extended thinking | Toggle via / menu |
| Multi-line input | Shift+Enter for new lines |
Reference files and folders by typing @:
Explain the logic in @auth.js
What's in @src/components/
@app.ts#5-10 — what does this block do?
Full access
Unlock all 14 lessons, templates, and resources for Claude Code Mastery. Free.
@file.ts#5-10Select code in the editor and Claude sees it automatically. The prompt footer shows "X lines selected."
Option+K (Mac) / Alt+K — insert @-mention with file path and line numbersQ: How do you reference specific lines of a file in VS Code's Claude panel?
Use @filename#startLine-endLine — for example, @app.ts#5-10 references lines 5 through 10. You can also select code in the editor and it's automatically included, or use Option+K / Alt+K to insert an @-mention with the current file and selected line numbers.
Drag the Claude panel to:
Open Command Palette → "Claude Code: Open in New Tab" or "Open in New Window"
Each conversation has its own history and context.
| Indicator | Meaning |
|---|---|
| 🔵 Blue dot | Permission request pending |
| 🟠 Orange dot | Claude finished while tab hidden |
| Command | Shortcut | Description |
|---|---|---|
| Focus Input | Cmd+Esc / Ctrl+Esc | Toggle between editor and Claude |
| New Conversation | Cmd+N / Ctrl+N | Start fresh (Claude focused) |
| Open in New Tab | Cmd+Shift+Esc / Ctrl+Shift+Esc | Parallel conversation |
| Insert @-Mention | Option+K / Alt+K | Reference current file/selection |
Prefer the CLI experience? Settings → Extensions → Claude Code → ✅ Use Terminal.
Fill in the blanks:
Cmd+___ (Mac)@___Option+___ (Mac)Cmd+Esc@filenameOption+KConnect Claude Code to your Chrome browser for automation, testing, and web interaction.
| Capability | Example |
|---|---|
| Live debugging | Read console errors, fix the code that caused them |
| Design verification | Build UI from Figma mock, verify in browser |
| Web app testing | Test form validation, check for visual regressions |
| Authenticated apps | Interact with Gmail, Notion, Google Docs |
| Data extraction | Scrape structured data from web pages |
| Task automation | Fill forms, enter data across multiple sites |
| Session recording | Record interactions as GIFs |
claude --chrome
Or enable permanently:
/chrome → "Enabled by default"
In VS Code, Chrome is available automatically when the Chrome extension is installed.
Q: Can Claude Code interact with sites you're logged into, like Gmail or Notion?
Yes! Chrome integration uses your actual browser session, so Claude can interact with any authenticated site — Gmail, Notion, Google Docs, your company's internal tools, etc. Site permissions are managed in the Chrome extension settings, where you control which sites Claude can browse, click, and type on.
I just updated the login form validation. Can you open localhost:3000,
try submitting with invalid data, and check if error messages appear?
Open the dashboard and check the console for any errors when the page loads.
Check my calendar for meetings tomorrow. For each meeting with an external
attendee, look up their company website and add a note about what they do.
Record a GIF showing how to complete the checkout flow, from adding an item
to the cart through to the confirmation page.
Use @browser in the prompt box:
@browser go to localhost:3000 and check the console for errors
Q: How do you use Chrome integration from VS Code specifically?
Use the @browser prefix in the VS Code prompt box — for example: @browser go to localhost:3000 and check for errors. The Chrome extension must be installed and enabled. In VS Code, Chrome is available automatically when the extension is detected.
chrome://extensionsclaude --version/chrome → "Reconnect extension"The Chrome extension's service worker can go idle during long sessions. Run /chrome → "Reconnect extension."
Claude Code also works with JetBrains IDEs (IntelliJ IDEA, WebStorm, PyCharm, etc.) via a dedicated plugin. The experience is similar to VS Code — a chat panel with @-mentions, permission modes, and session management.
Fill in the blanks:
/___ → "Enabled by default"@___ prefix/chrome → "___"/chrome@browserReconnect extension@ to reference a file — notice the fuzzy matchingCmd+Esc to toggle focus between editor and ClaudeCmd+Shift+Escclaude --chrome or enable via /chromeReflection: How does the VS Code experience compare to the terminal? When would you prefer each?
Scenario: You're building a web app and want to verify that your CSS changes look correct on both mobile and desktop viewports. You don't have a visual regression testing tool set up.
Use Chrome integration for manual visual verification:
Open localhost:3000 in Chrome. Take a screenshot at full desktop width.
Then resize to 375px width (mobile) and take another screenshot.
Compare the layouts and tell me if anything looks broken — overlapping
elements, text overflow, buttons cut off, etc.
For ongoing verification, combine with a Stop hook that captures screenshots after every edit:
{
"hooks": {
"PostToolUse": [{
"matcher": "Edit",
"hooks": [{
"type": "prompt",
"prompt": "If the edited file is a CSS/SCSS/TSX file, take browser screenshots at 1440px and 375px width and verify the layout looks correct."
}]
}]
}
}
| Concept | One-Liner |
|---|---|
| VS Code install | Extensions → search "Claude Code" → Install |
| @-mentions | @file, @folder/, @file#5-10 for line ranges |
| Focus toggle | Cmd+Esc / Ctrl+Esc |
| Insert reference | Option+K / Alt+K for current file/selection |
| Multiple chats | Cmd+Shift+Esc opens new tab |
| Chrome setup | claude --chrome or /chrome |
| Chrome in VS Code | @browser prefix in prompt |
| Authenticated sites | Works with any site you're logged into |
| JetBrains | Also supported via dedicated plugin |
Next up: Advanced Techniques & Ralph Wiggum → — Master iterative AI loops, git worktrees, and power workflows.