Preview Browser

The preview browser gives you a built-in web browser panel for testing your apps, complete with device emulation, Chrome DevTools, and element inspection.

Tab Management

Manage multiple preview tabs like a regular browser:

• Create tabs - Cmd+T opens a new blank tab
• Close tabs - Cmd+W closes the active tab
• Switch tabs - Cmd+1-9 jumps to numbered tabs
• Reorder tabs - Drag tabs to rearrange

Tab Types

• Manual tabs - Created by user
• Server tabs - Auto-created when dev server detected (linked to terminal)

Tab Indicators

• Favicon from page
• Page title (updates on navigation)
• Loading spinner during page load
• Green pulsing dot on tabs connected to running dev servers

Smart URL Bar

The URL bar understands what you want to navigate to:

Shortcuts:

• Cmd+L - Focus URL bar and select all text
• Enter - Navigate to entered URL
• Escape - Cancel editing

Device Preview Modes

Test responsive designs with built-in device presets. The device toolbar at the bottom of the preview panel lets you switch between three modes:

• Desktop (monitor icon): constrains the viewport to a fixed desktop resolution
• Tablet (tablet icon): shows a tablet-sized viewport
• Phone (phone icon): shows a phone-sized viewport

Click a mode icon to activate it. Click the same icon again to return to responsive (full-width) mode.

Device Presets

Each mode includes a dropdown with common device presets:

Phone presets:

Tablet presets:

Desktop presets:

Custom Dimensions

Select Custom from the preset dropdown to enter your own width and height. Dimensions are clamped between 350px minimum and 3840 x 2160 maximum.

Rotate

The rotate button swaps width and height, useful for testing landscape vs portrait orientations.

Scaling

When the viewport dimensions exceed the available panel space, the preview automatically scales down to fit. The current scale percentage is shown in the toolbar.

Device mode is saved per project.

Embedded DevTools

Full Chrome DevTools available inline:

Opening DevTools

• Cmd+Option+I - Toggle DevTools panel
• Click the DevTools button in toolbar

Position Options

• Bottom - DevTools below preview (good for wide screens)
• Right - DevTools beside preview (good for tall screens)

Features

• Full Elements, Console, Network, Sources panels
• Element inspection
• Live CSS editing
• JavaScript console
• Network request monitoring

Element Picker

Inspect page elements without opening DevTools:

1. Click the element picker button (crosshairs icon)
2. Hover over elements - they highlight as you move
3. Click to select an element
4. View element details in popover

Element Info Captured

• Tag name
• ID and CSS classes
• Unique CSS selector
• Text content preview
• Element dimensions

Find in Page

Press Cmd+F while the preview panel is focused to open a Chrome-style find bar. Search for text on the current page with:

• Match counter showing current position and total matches
• Previous/next navigation buttons
• Responsive layout that adapts to panel width

This also works in pinned app panels.

Open Links in Browser

Right-click any link in the preview to access “Open Link in Browser”, which opens the URL in your default system browser. This is useful for links that need full browser capabilities or when you want to view something outside Blueberry.

Console Capture

Browser console logs are captured for debugging:

Log Levels: log, warn, error, info, debug

• Logs captured per tab (max 100 entries)
• Automatically cleared when page reloads
• Available via MCP for Claude integration

Certificate & Authentication

Certificate Errors

When navigating to a site with an untrusted HTTPS certificate, the preview shows a warning interstitial with details about the certificate issue. You can choose to proceed anyway. The URL bar also displays a “Not Secure” badge for these pages.

HTTP Basic Auth

Password-protected pages trigger a sign-in dialog directly in the preview. This also works for pinned apps, so tools behind HTTP authentication are accessible without leaving Blueberry.

Server Detection Integration

Preview automatically connects with detected dev servers:

1. Terminal detects server on port
2. Preview creates a new tab linked to that terminal
3. Tab shows green indicator while server is running
4. Tab auto-navigates to server URL