pi-browser-debug

Pi extension for debugging active browser sessions via Chrome DevTools Protocol (CDP).

Setup

Start your browser with remote debugging enabled:

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

# If you get "Opening in existing browser session", use --user-data-dir to force a new instance
google-chrome-stable --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

Windows

chrome.exe --remote-debugging-port=9222

Tip: Keep the terminal open. Closing it kills the browser instance.

Install

The npm package name is pi-browser-debug.

# From npm
pi install npm:pi-browser-debug

# From git
pi install git:github.com/nandafirmans/pi-browser-debug

# From local path (for development)
pi install ./path/to/pi-browser-debug

Tools

Tool	Description
browser_connect	Connect to active browser via CDP
browser_navigate	Navigate to URL with proper load handling
browser_list_pages	List all open tabs
browser_console	Capture console logs
browser_network	Capture failed/slow network requests
browser_eval	Execute JS in page context
browser_storage	Inspect localStorage / cookies
browser_snapshot	Get accessibility tree
browser_click	Click element by selector or name
browser_fill	Fill form input
browser_reload	Reload page
browser_screenshot	Take screenshot of page or element
browser_close	Close CDP connection

Usage in Pi

Natural language:

Connect to my browser on port 9222
Navigate to https://localhost:5003
Get console logs
Take a screenshot

Direct tool calls:

/browser_connect port=9222
/browser_navigate url=https://localhost:5003 waitUntil=networkidle
/browser_console level=error
/browser_network filter=failed
/browser_screenshot fullPage=true
/browser_eval code="document.querySelectorAll('.error').length"

Requirements

• Pi coding agent
• Playwright (npm install playwright or let pi install it)
• Chrome / Chromium / Edge with --remote-debugging-port=9222