browser-testing-with-devtools SKILL.md skillA

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

mdr add lll0k0lad/agent-skills/browser-testing-with-devtools@git:20260215.f53216f

Pins git:20260215.f53216f in mdr.lock. Pin the fingerprint instead.

Audit grade

A, 17 of 17 checks passed

Kind

SKILL.md skill

Repository

lll0k0lad/agent-skills

Path

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

Versions recorded

1

Latest version

git:20260215.f53216f, committed Feb 15, 2026

Size

8,688 bytes

Repository stars

3

License

MIT

Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data via Chrome DevTools MCP.

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

```bash
# Add Chrome DevTools MCP server to your Claude Code config
# In your project's .mcp.json or Claude Code settings:
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@anthropic/chrome-devtools-mcp@latest"]
    }
  }
}
```

### Available Tools
…

Read the whole file at its exact version.

How to install

mdr add lll0k0lad/agent-skills/browser-testing-with-devtools@sha256:c64bf33a6620d10a

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

Versions

The registry has recorded 1 version of this file, committed on Feb 15, 2026.

Audit of the latest version

Source

API

GET https://markdownregistry.com/api/v1/artifacts/art_e5dnm4i35lvf6t4l
GET https://markdownregistry.com/api/v1/resolve?ref=lll0k0lad/agent-skills/browser-testing-with-devtools
GET https://markdownregistry.com/api/v1/blob/c64bf33a6620d10a5ce6806d496b6e4919f16591527248aae09d35caace827b4

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 lll0k0lad/agent-skills

Every file in lll0k0lad/agent-skills

Other files named browser-testing-with-devtools

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