How do I install the Chrome Devtools skill?

Run npx skillmds@latest add ry-run/chrome-devtools in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Chrome Devtools safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chrome Devtools?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chrome Devtools free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chrome Devtools?

ry-run (@ry-run) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chrome Devtools by ry-run — Agent Skill

Name: Chrome Devtools
Author: ry-run

Chrome Devtools

Use Chrome DevTools MCP for real-browser debugging: console and network inspection, runtime state checks, Lighthouse audits, and performance tracing. Use it when diagnosis and browser internals matter more than scripted cross-browser automation.

ry-run b0532e1 5 files · 4.7 KB Updated Sep 17, 2026

File contents

Chrome DevTools

Quick start

Goal: inspect and debug a real page with DevTools-style tooling: snapshots, console, network, screenshots, audits, and traces.

Reference notes: skills/chrome-devtools/references/chrome-devtools.md

Best-fit use cases

Frontend debugging in a real browser.
Checking console errors, network requests, or runtime state.
Running Lighthouse or performance traces.
Interacting with pages where DOM state matters.

Recommended workflow

Open or select the target page.
Take an accessibility snapshot before interacting.
Click/fill/type only after identifying the right element UID.
Inspect console/network when behavior is unclear.
Use Lighthouse or trace tools for quality/performance work.

Prefer Chrome DevTools when

You need console, network, trace, or audit tooling.
You want direct DOM evaluation on the loaded page.
The task is debugging a web app, not just reproducing a user flow.

Guardrails

Always use the latest snapshot before clicking or typing.
For PDFs, prefer screenshot on specific pages.
Use performance tracing selectively; it is heavier than normal inspection.

References

Condensed notes: skills/chrome-devtools/references/chrome-devtools.md

Frequently asked questions