菜单
Debug-first browser automation with always-on visibility. Console logs, network requests, and errors captured by default. USE WHEN browser, screenshot, debug web, verify UI, troubleshoot frontend.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/danielmiessler/Personal_AI_Infrastructure --skill browser命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | Browser |
| description | Debug-first browser automation with always-on visibility. Console logs, network requests, and errors captured by default. USE WHEN browser, screenshot, debug web, verify UI, troubleshoot frontend. |
| version | 2.0.0 |
Before executing, check for user customizations at:
~/.claude/skills/CORE/USER/SKILLCUSTOMIZATIONS/Browser/
If this directory exists, load and apply any PREFERENCES.md, configurations, or resources found there. These override default behavior. If the directory does not exist, proceed with skill defaults.
Debugging visibility by DEFAULT. Console logs, network requests, and errors are always captured. No opt-in required.
Debugging shouldn't be opt-in. Like good logging frameworks - you don't turn on logging when you have a problem, you have it enabled from the start so the data exists when problems occur.
Headless by default. All automation runs in headless mode. When the user says "show me" or wants to see what the assistant is seeing, open the URL in their preferred browser from ~/.claude/skills/CORE/USER/TECHSTACKPREFERENCES.md:
# Open URL in user's preferred browser
open -a "$BROWSER" "<url>" # BROWSER from tech stack prefs
v2.0.0 Changes:
session start)Browse.ts <url> for full diagnostics# Navigate with full diagnostics (PRIMARY COMMAND)
bun run ~/.claude/skills/Browser/Tools/Browse.ts https://example.com
# Output:
# 📸 Screenshot: /tmp/browse-1704614400.png
# 🔴 Console Errors (2): ...
# 🌐 Failed Requests (1): ...
# 📊 Network: 34 requests | 1.2MB | avg 120ms
# ✅ Page: "Example" loaded successfully
Session auto-starts. No setup needed.
bun run Browse.ts <url>
Navigates to URL, takes screenshot, and reports:
bun run Browse.ts errors # Console errors only
bun run Browse.ts warnings # Console warnings only
bun run Browse.ts console # All console output
bun run Browse.ts network # All network activity
bun run Browse.ts failed # Failed requests only (4xx, 5xx)
bun run Browse.ts click <selector> # Click element
bun run Browse.ts fill <selector> <value> # Fill input
bun run Browse.ts type <selector> <text> # Type with delay
bun run Browse.ts screenshot [path] # Take screenshot
bun run Browse.ts navigate <url> # Navigate without report
bun run Browse.ts eval "<javascript>" # Execute JavaScript
bun run Browse.ts open <url> # Open in user's preferred browser (from tech stack prefs)
bun run Browse.ts status # Session info
bun run Browse.ts restart # Fresh session (clears logs)
bun run Browse.ts stop # Stop session (rarely needed)
Scenario: "Why isn't the user list loading?"
# Step 1: Load the page
$ bun run Browse.ts https://myapp.com/users
📸 Screenshot: /tmp/browse-xxx.png
🔴 Console Errors (1):
• TypeError: Cannot read property 'map' of undefined
🌐 Failed Requests (1):
• GET /api/users → 500 Internal Server Error
📊 Network: 23 requests | 847KB | avg 89ms
⚠️ Page: "Users" loaded with issues
Immediately know:
Step 2: Dig deeper
# Full console output
$ bun run Browse.ts console
# All network activity
$ bun run Browse.ts network
# Just the failures
$ bun run Browse.ts failed
First command auto-starts a persistent browser session:
Any command → ensureSession() → Session running?
├─ Yes → Execute command
└─ No → Start session → Execute command
No explicit session start needed.
From the moment the browser launches:
console.log, console.error, etc.Session auto-closes after 30 minutes of inactivity:
| Aspect | v1.x | v2.0.0 |
|---|---|---|
| Session management | Manual session start/stop | Automatic |
| Console capture | Only in session mode | Always |
| Network capture | Only in session mode | Always |
| Error visibility | Must query explicitly | Default in output |
| Idle cleanup | Manual stop | Auto 30-min timeout |
| Primary command | screenshot <url> | <url> (full diagnostic) |
Location: ~/.claude/skills/Browser/Tools/Browse.ts
| Command | Description |
|---|---|
<url> | Navigate with full diagnostics |
errors | Show console errors |
warnings | Show console warnings |
console | Show all console output |
network | Show network activity |
failed | Show failed requests |
screenshot [path] | Take screenshot |
navigate <url> | Navigate without report |
click <selector> | Click element |
fill <sel> <val> | Fill input |
type <sel> <text> | Type with delay |
eval "<js>" | Execute JavaScript |
open <url> | Open in user's preferred browser (tech stack prefs) |
status | Session info |
restart | Fresh session |
stop | Stop session |
Location: ~/.claude/skills/Browser/Tools/BrowserSession.ts
| Endpoint | Method | Description |
|---|---|---|
/diagnostics | GET | Full diagnostic summary |
/console | GET | Console logs |
/network | GET | Network logs |
/health | GET | Health check |
/session | GET | Session info |
/navigate | POST | Navigate (clears logs) |
/click | POST | Click element |
/fill | POST | Fill input |
/screenshot | POST | Take screenshot |
/evaluate | POST | Run JavaScript |
/stop | POST | Stop server |
For complex automation, use the TypeScript API directly:
import { PlaywrightBrowser } from '~/.claude/skills/Browser/index.ts'
const browser = new PlaywrightBrowser()
await browser.launch({ headless: true })
await browser.navigate('https://example.com')
// Get diagnostics
const errors = browser.getConsoleLogs({ type: 'error' })
const failed = browser.getNetworkLogs({ status: [400, 404, 500] })
const stats = browser.getNetworkStats()
await browser.close()
Full API: See index.ts for all methods.
MANDATORY for verifying web changes:
# Before claiming any web change is "live" or "working":
bun run Browse.ts https://example.com/changed-page
# Check the screenshot AND diagnostics
# If errors or failed requests exist, the change is NOT verified
If you haven't LOOKED at the rendered page and its diagnostics, you CANNOT claim it works.