—
Capture
Inspect
Data
Chat
Browser Connect — Developer Reference
Capture
📷 ScreenshotCapture the current viewport. Attach to any message.
⬚ RegionDraw a box to capture a specific area of the page.
📄 Full pageScroll and stitch the entire page into one tall image.
🎞 FilmstripHold R (or click) to record frames every 0.5s. Sends up to 6 evenly-spaced frames with timestamps and scroll position.
⬡ DiffClick once → saves "before". Make a change. Click again → highlights changed pixels in red. Shows % change.
Inspect
↖ Element pickerClick any element to capture its full HTML, computed CSS, dimensions, and CSS selector.
★ AnnotateClick elements to drop numbered pins. Add a text note per pin. All pins + notes are sent as a structured report.
T Selected textSends whatever text is highlighted on the page into the chat input. Also available via right-click → "Ask Claude".
♿ A11y auditChecks alt text, ARIA labels, form labels, contrast ratios, landmarks, duplicate IDs, positive tabindex, and more.
🔍 SEOReads title, meta description, canonical, robots, lang, viewport, H1s, Open Graph, Twitter Card, and JSON-LD.
Data
📡 NetworkAttaches intercepted XHR/fetch requests grouped by route. Includes avg response time, status codes, errors.
≡ Noise filterToggle (default on) — hides RSC prefetch, JS/CSS/font/image requests. Shows only API calls.
> ConsoleAttaches live browser console output — errors, warnings, logs, stack traces.
⚡ Auto-errorWhen on, uncaught JS errors are automatically sent to Claude without clicking anything.
Chat
↓ ExportDownloads the full conversation as an HTML file with all screenshots embedded as data URIs.
🗑 ClearClears the conversation thread and all attached data. Persisted history is also removed.
⌘V PastePaste any image from clipboard (e.g. Figma frame, design spec) directly into the chat input area.
Page content
"What's on this page?"
"Take a screenshot and describe the layout"
"Is there a login form on this page?"
"What does the hero section say?"
Interaction
"Click the Sign In button"
"Fill the email field with test@example.com"
"Scroll to the bottom of the page"
"Navigate to /dashboard"
"Press Escape to close the modal"
"Wait for the loading spinner to disappear"
Debugging
"Check the console for errors" attach Console first
"Which API calls failed?" attach Network first
"Why is the page slow?" attach Network first
"What's in localStorage?"
"Run document.querySelectorAll('.btn').length and tell me how many buttons there are"
QA & accessibility
"Run an accessibility audit" click ♿ first
"Fix the contrast issues on this page" attach A11y report
"Check the SEO for this page" click 🔍 first
"Compare before and after screenshots" use Diff button
Claude can call these tools directly. Start the MCP server with browserconnect and add it to .mcp.json as browser-connect.
Messaging
get_pending_messageRead the next message sent from the panel. Clears on read.send_responseSend a reply back to the panel chat bubble.clear_messagesFlush the message queue.Capture
take_screenshotCapture the active tab as JPEG and return it as an image.DOM interaction
click_element(selector)Click a DOM element by CSS selector.fill_input(selector, value)Set an input or textarea value and fire input+change events.type_text(text)Type into the focused element via real keyboard events.press_key(key)Press a key — Enter, Tab, Escape, ArrowDown, Backspace, etc.hover_element(selector)Trigger mouseenter/mouseover to reveal tooltips or dropdowns.find_element(description)Find an element by plain language ("submit button", "email input"). Returns selector + outerHTML.get_dom(selector?)Get outerHTML of the page or a specific element.execute_js(code)Run arbitrary JS in the page's main world and return the serialized result.Navigation & scroll
navigate_to(url)Navigate the pinned tab to a URL and wait for load.scroll_page(direction, amount?)"down"/"up" by pixels, or "top"/"bottom" to jump.wait_for_element(selector, timeout?)Poll until a CSS selector appears — useful after async renders.Page state
get_console_logFetch live browser console output from the active tab.get_network_requestsFetch intercepted XHR/fetch requests with URL, method, status, duration.get_storageRead localStorage, sessionStorage, and cookies.get_performanceNavigation timing, Core Web Vitals, and slowest resources.get_selected_textReturn whatever text the user has highlighted on the page.ctrl+↵ send