Screenshot & Element Select

Give your AI visual context by capturing screenshots, selecting specific elements, and sharing console output from your preview browser.

Overview

Sometimes code alone isn’t enough. When you’re debugging a layout issue, reviewing a UI change, or tracking down a visual bug, Claude needs to see what you see. Blueberry lets you share visual context from the preview browser directly with Claude.

Screenshot Capture

Take a screenshot of your preview browser and share it with Claude for visual analysis.

How It Works

1. Make sure your preview browser is open with the page you want to capture
2. Ask Claude to take a screenshot, or use the screenshot button in the preview toolbar
3. Claude receives the image and can analyze layout, styling, content, and visual bugs

What Claude Can Do With Screenshots

• Visual debugging - Identify layout issues, misaligned elements, or broken styles
• UI review - Compare the current state against your design intent
• Responsive testing - Check how your app looks across device modes (desktop, tablet, phone)
• Error states - See what error pages or empty states actually look like

Tips

• Switch device modes before capturing to test responsive layouts
• Navigate to the specific page or state you want reviewed before asking for a screenshot
• Use screenshots when the visual result matters more than the underlying HTML

Element Picker

Select a specific element from the preview browser to give Claude targeted context about a particular part of your UI.

How to Use

1. Click the element picker button (crosshairs icon) in the preview toolbar
2. Hover over elements in the preview - they highlight as you move
3. Click to select an element
4. The element details are captured and available for Claude

What Gets Captured

• Tag name - The HTML element type
• ID and classes - CSS identifiers for the element
• CSS selector - A unique selector path to the element
• Text content - A preview of the element’s text
• Dimensions - Width and height of the element

When to Use

• Point Claude to a specific button, form, or section that needs work
• Identify which component corresponds to a visual element
• Debug styling on a particular element without describing it manually

Console Log Capture

Share browser console output with Claude for runtime debugging.

What’s Captured

Console logs are collected per preview tab and include all log levels:

• log - General output
• warn - Warnings
• error - Errors and exceptions
• info - Informational messages
• debug - Debug output

How It Works

• Logs are captured automatically from your preview browser
• Up to 100 entries are stored per tab
• Logs clear automatically when the page reloads
• Claude can filter by log level and read only errors, for example

Use Cases

• Runtime errors - Ask Claude to check the console for JavaScript errors
• API debugging - See failed network requests or unexpected responses logged to console
• State inspection - Review console.log output from your app’s logic

Keyboard Shortcuts

Tips for Effective Use

• Use content capture for text, screenshots for visuals. If you need Claude to read what’s on the page, blueberry_capture_webview_content is faster and more accurate. Use screenshots when layout and appearance matter.
• Combine context types. Ask Claude to check both the screenshot and console logs together for a complete debugging picture.
• Test across devices. Switch to phone or tablet mode in the preview before capturing to verify responsive behavior.
• Clear logs for focused debugging. Have Claude clear the console log buffer, reproduce the issue, then read only the new logs.