# Browser Testing With Devtools

> Use Chrome DevTools MCP for live DOM inspection, console error capture, network request analysis, and paint profiling — runtime verification beyond what Playwright scripting covers.

- **Type:** Skill
- **Install:** `agentstack add skill-manastalukdar-ai-devstudio-browser-testing-with-devtools`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [manastalukdar](https://agentstack.voostack.com/s/manastalukdar)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [manastalukdar](https://github.com/manastalukdar)
- **Source:** https://github.com/manastalukdar/ai-devstudio/tree/main/skills/browser-testing-with-devtools

## Install

```sh
agentstack add skill-manastalukdar-ai-devstudio-browser-testing-with-devtools
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Browser Testing with DevTools

I'll connect to a running browser session and inspect it at runtime: DOM state, console errors, network traffic, and rendering performance. Requires Chrome DevTools MCP to be configured.

Arguments: `$ARGUMENTS` — URL to open or test to perform (e.g., "check login flow at http://localhost:3000")

## Token Optimization

**Expected range**: 300–800 tokens per inspection (snapshot + analysis)

**Early exit**: If no issues are found in the initial snapshot, report "No issues detected" and stop

**Patterns used**: Progressive disclosure (summary first, full DOM/network only on specific request)

## Prerequisites

Chrome DevTools MCP must be configured. Verify:

```bash
# Check if chrome-devtools-mcp is in MCP config
grep -r "devtools\|chrome" ~/.claude/settings.json .claude/settings.json 2>/dev/null | head -5
```

If not configured, report the requirement and stop.

## Step 1 — Open or Connect to Page

Navigate to the target URL:

```
Navigate to: [URL from $ARGUMENTS or inferred from project]
Wait for: DOM ready / network idle
```

Take an initial snapshot of the page state (accessibility tree + title).

## Step 2 — Console Error Scan

Capture all console messages:

```
Console output:
  errors:   [count]
  warnings: [count]
  logs:     [count]

Top errors (if any):
  [message] — [source file:line]
```

Any `console.error` or unhandled promise rejection is a test failure. Report immediately.

## Step 3 — DOM Inspection

For the specific flow being tested, inspect the relevant DOM elements:

- Verify expected elements exist and are visible
- Check ARIA roles, labels, and focus order for accessibility
- Confirm form inputs, buttons, and interactive elements are in the expected state
- Flag any elements with `display: none`, `visibility: hidden`, or `opacity: 0` that should be visible

```
DOM check:
  [element] — [found / not found / wrong state]
  [element] — [found / not found / wrong state]
```

## Step 4 — Network Request Analysis

Review network requests made during the test flow:

```
Network:
  total requests: [N]
  failed (4xx/5xx): [N]
  slow (>500ms): [N]

Failed requests:
  [URL] — [status] — [response body excerpt]
```

Flag any unexpected 404s, 401s, CORS errors, or requests to the wrong environment.

## Step 5 — Performance Snapshot

For pages where rendering performance matters:

```
Performance:
  FCP (First Contentful Paint): [N]ms — [good 3s]
  LCP (Largest Contentful Paint): [N]ms — [good 4s]
  Layout shifts: [N] — [stable / unstable]
```

Flag any Core Web Vitals that are in the "needs work" or "poor" range.

## Step 6 — Report

```
Browser Test: [URL] — [PASS / FAIL]

Issues found: [N]
  [severity] [category]: [description]
  ...

Passed checks:
  - [check description]
  ...
```

## Edge Cases

- **Chrome DevTools MCP not available**: report the requirement; suggest using Playwright for automated testing instead
- **Page requires authentication**: note the requirement; the user must provide a session cookie or perform login steps manually before calling this skill
- **Single-page app not fully hydrated**: wait for network idle before inspecting; add explicit wait if hydration takes more than 2 seconds
- **Local dev server not running**: detect via connection refused; report which server to start

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [manastalukdar](https://github.com/manastalukdar)
- **Source:** [manastalukdar/ai-devstudio](https://github.com/manastalukdar/ai-devstudio)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-manastalukdar-ai-devstudio-browser-testing-with-devtools
- Seller: https://agentstack.voostack.com/s/manastalukdar
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.