原始内容
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 playwrightor let pi install it) - Chrome / Chromium / Edge with
--remote-debugging-port=9222