browser-testing-with-devtools SKILL.md skillA

browser-testing-with-devtools from jpeetz/agent-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

mdr add jpeetz/agent-skills/browser-testing-with-devtools@git:20261012.4b2f1b0

Pins git:20261012.4b2f1b0 in mdr.lock. Pin the fingerprint instead.

Audit grade

A, 17 of 17 checks passed

Kind

SKILL.md skill

Repository

jpeetz/agent-skills

Path

skills/qa-testing/browser-testing-with-devtools/SKILL.md

Versions recorded

1

Latest version

git:20261012.4b2f1b0, committed Oct 12, 2026

Size

9,667 bytes

Repository stars

16

License

none declared

Use this skill when building or debugging anything that renders in a browser. Tests in real browsers via Chrome DevTools MCP — inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# Browser Testing with DevTools

## Overview

Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it.

## When to Use

- Building or modifying anything that renders in a browser
- Debugging UI issues (layout, styling, interaction)
- Diagnosing console errors or warnings
- Analyzing network requests and API responses
- Profiling performance (Core Web Vitals, paint timing, layout shifts)
- Verifying that a fix actually works in the browser
- Automated UI testing through the agent

**When NOT to use:** Backend-only changes, CLI tools, or code that doesn't run in a browser.

## Setting Up Chrome DevTools MCP

### Installation

Add the following to your project's `.mcp.json` or Claude Code settings:

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
    }
  }
}
```
…

Read the whole file at its exact version.

How to install

mdr add jpeetz/agent-skills/browser-testing-with-devtools@sha256:3bd70783fee997d3

[![mdr](https://markdownregistry.com/badge/art_rlst5qtxchcui6or.svg)](https://markdownregistry.com/a/art_rlst5qtxchcui6or)

Versions

The registry has recorded 1 version of this file, committed on Oct 12, 2026.

Audit of the latest version

Source

API

GET https://markdownregistry.com/api/v1/artifacts/art_rlst5qtxchcui6or
GET https://markdownregistry.com/api/v1/resolve?ref=jpeetz/agent-skills/browser-testing-with-devtools
GET https://markdownregistry.com/api/v1/blob/3bd70783fee997d31c12ee80cd858d50624b19ee51cda3e3dd338d8bb47d652c

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from jpeetz/agent-skills

Every file in jpeetz/agent-skills

Other files named browser-testing-with-devtools

Browse by kind, by grade A, or by owner.