Browser Screenshots

Quick browser screenshots for debugging web applications

Quick Start

Take a screenshot in one command - no setup required:

Terminal

$co -b "screenshot localhost:3000"

Instant capture

Auto timestamp

Device presets

PNG format

Command Format

co -b "screenshot [URL] [save to PATH] [size SIZE]"

[URL]Required. The page to screenshot (e.g., localhost:3000)

[save to PATH]Optional. Where to save the screenshot

[size SIZE]Optional. Viewport size or device preset

Examples

Basic Screenshots

Terminal

$# Screenshot local development

$co -b "screenshot localhost:3000"

$# With specific port

$co -b "screenshot localhost:8080"

$# External site

$co -b "screenshot example.com"

Save to Specific Path

Terminal

$# Save to temp directory

$co -b "screenshot localhost:3000 save to /tmp/debug.png"

$# Save with custom name

$co -b "screenshot localhost:3000 save to homepage.png"

$# Save to subdirectory

$co -b "screenshot localhost:3000 save to screenshots/test.png"

Device Sizes

Terminal

$# iPhone viewport

$co -b "screenshot localhost:3000 size iphone"

$# Custom dimensions

$co -b "screenshot localhost:3000 size 390x844"

$# Common presets

$co -b "screenshot localhost:3000 size ipad"

$co -b "screenshot localhost:3000 size desktop"

Device Presets

Preset	Dimensions	Device
iphone	390×844	iPhone 14/15
android	360×800	Common Android
ipad	768×1024	iPad
desktop	1920×1080	Full HD Desktop

Complete Examples

Debug mobile checkout flow

$co -b "screenshot localhost:3000/checkout save to /tmp/checkout-mobile.png size iphone"

Document bug on specific page

$co -b "screenshot localhost:3000/xray save to bug-report.png size 1920x1080"

Test responsive design

$co -b "screenshot localhost:3000 save to mobile.png size 390x844"

$co -b "screenshot localhost:3000 save to tablet.png size 768x1024"

$co -b "screenshot localhost:3000 save to desktop.png size 1920x1080"

Use Cases

Debug Local Development

Quick visual checks during development

Terminal

$# Quick check of homepage

$co -b "screenshot localhost:3000"

$# Debug specific route

$co -b "screenshot localhost:3000/api/status"

Document Bugs

Capture visual proof of issues

Terminal

$# Capture error state

$co -b "screenshot localhost:3000/error save to bug.png"

$# Mobile-specific issue

$co -b "screenshot localhost:3000/mobile-bug save to mobile-issue.png size iphone"

Test Responsive Design

Verify layouts across devices

for size in iphone android ipad desktop; do
  co -b "screenshot localhost:3000 save to view-$size.png size $size"
done

CI/CD Integration

Automated visual testing

Terminal

$# In GitHub Actions

$co -b "screenshot $DEPLOY_URL save to artifacts/deployed.png"

URL Handling

The command intelligently handles URLs:

localhost→http://localhost

localhost:3000→http://localhost:3000

example.com→https://example.com

http://example.com→http://example.com(unchanged)

Installation

Standard Installation

Browser features require Playwright:

Terminal

$pip install playwright

$playwright install chromium

With Browser Support

Or install ConnectOnion with browser support:

Terminal

$pip install connectonion[browser]

Framework Examples

Next.js

Terminal

$co -b "screenshot localhost:3000"

$co -b "screenshot localhost:3000/_error save to error.png"

FastAPI

Terminal

$co -b "screenshot localhost:8000"

$co -b "screenshot localhost:8000/docs save to api-docs.png"

Django

Terminal

$co -b "screenshot localhost:8000"

$co -b "screenshot localhost:8000/admin save to admin.png"

React Dev Server

Terminal

$co -b "screenshot localhost:3000"

$co -b "screenshot localhost:3000 size iphone"

Common Error Messages

❌ Usage: co -b "screenshot [URL] [save to PATH] [size SIZE]"

Missing URL in command

❌ Browser tools not installed

Run: pip install playwright && playwright install chromium

❌ Cannot reach http://localhost:3000

Is your server running?

❌ Cannot save to /root/test.png (permission denied)

Check file permissions

Tips

Quick Debug

Just co -b "screenshot localhost:3000" for instant feedback

Organize Screenshots

Use descriptive paths like save to bugs/issue-123.png

Test Viewports

Use device names (iphone, ipad) for common sizes

Timestamps

Default filenames include timestamp for versioning

Limitations

•Screenshots only (no interaction, clicking, forms)
•Single page at a time
•Headless browser only
•PNG format only

For complex browser automation, use the full ConnectOnion browser agent or Playwright directly.

Summary

The -b flag provides dead-simple browser screenshots. No setup, no complexity - just describe what screenshot you want and where to save it. Perfect for debugging during development.

Auto Debug Exception

Models