# Debug Browser Pages from the Command Line

Frontend debugging often needs a real browser session that survives across commands. This skill provides Playwright-based browser control for navigation, inspection, screenshots, and logs.

## Install

```bash
npx skillstore add dcjanus/pwdebug
```

## Metadata

- Status: approved
- Slug: dcjanus-pwdebug
- Skillstore revision: r1
- Version status: missing
- Tree hash: b093835ff8b606103484105c0f3613f65f2000b386380ca750753c993ba01195
- Author: DCjanus
- GitHub username: DCjanus
- License: MIT
- Repository: https://github.com/DCjanus/prompts/tree/master/skills/pwdebug
- Ref: 7e9e368dc1a370f2040369ebcd0db06d90cb48e5
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, network, filesystem
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/dcjanus-pwdebug
- Manifest: https://skillstore.pages.dev/api/skills/dcjanus-pwdebug/manifest

## Capabilities

- Starts a Chromium browser service through Playwright and CDP.
- Navigates the active page to a requested URL.
- Evaluates JavaScript expressions in the current browser page.
- Captures full-page or viewport screenshots to a local temporary file.
- Injects an element picker that returns selected DOM element details.
- Records console messages and page errors for later review.

## Use Cases

- Inspect a Broken Frontend Flow: Open a page, run focused JavaScript checks, capture a screenshot, and review console errors in one browser session.
- Collect Reproduction Evidence: Navigate to a reported issue, save visual evidence, and gather browser console messages for a bug report.
- Guide an AI Coding Session: Let an assistant inspect page state and selected elements while working on UI fixes.

## Prompt Templates

### Start a Debug Browser

```
Start pwdebug in headed mode, open my local app, and confirm that the page title loads.
```

### Capture Page Evidence

```
Use pwdebug to open this URL, capture a full-page screenshot, and summarize visible layout problems.
```

### Inspect an Element

```
Use the element picker to select the login button and report its text, classes, and parent structure.
```

### Diagnose Console Failures

```
Watch console logs while reproducing the issue, then review the latest entries and identify likely frontend causes.
```

## Limitations

- Only Chromium is supported in the current implementation.
- Requires uv, Playwright, and an installed Chromium browser.
- Stores browser state and console logs on the local filesystem.
- Does not replace a full automated browser test framework.

## Best Practices

- Use a dedicated test browser profile for debugging sessions.
- Stop the browser service when the debugging task is complete.
- Clear saved logs and screenshots when they may contain sensitive data.

## Anti Patterns

- Do not run arbitrary page JavaScript on sensitive production accounts.
- Do not expose the CDP port beyond localhost.
- Do not leave persistent debug sessions running unattended.

## Security Audit

- Audited at: 2026-07-05T09:49:15.967\+00:00
- Summary: The skill is a legitimate Playwright browser debugging CLI, but it launches a persistent Chromium process with CDP access. Most static hits in SKILL.md and picker.py are false positives from Markdown fences, JavaScript template literals, or keyboard event names. Safer defaults and clearer warnings are needed for CDP exposure, local artifacts, and page script evaluation.

## Stats

- Views: 193
- Downloads: 11
- Favorites: 0
- Popularity score: 0