How do I install the Chrome Devtools skill?

Run npx skillmds@latest add concertonotes/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. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. 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?

ConcertoNotes (@concertonotes) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chrome Devtools by concertonotes — Agent Skill

Name: Chrome Devtools
Rating: 4.666666666666667 (3 reviews)
Author: ConcertoNotes

Chrome Devtools

Use Chrome DevTools MCP to inspect live pages, reproduce browser issues, automate user flows, inspect console and network activity, and verify frontend fixes in a real Chrome session. Trigger when the user mentions browser bugs, client-side errors, broken forms, flaky UI behavior, or asks to interact with a site directly.

ConcertoNotes Updated Sep 8, 2026 0 repo stars

File contents

Use this skill when source inspection alone is not enough and Codex should operate a live browser.

Default Flow

Open or reuse a page with new_page or navigate_page.
Wait for the relevant UI if needed with wait_for.
Capture structure with take_snapshot.
Interact using uid values from the snapshot.
Inspect the relevant evidence surface:
- list_console_messages or get_console_message for runtime errors
- list_network_requests or get_network_request for API and asset failures
- take_screenshot when visible state matters
- evaluate_script for targeted DOM or app-state checks
Re-run the smallest verification path after each code change.

Working Rules

Prefer take_snapshot over screenshots for navigation and form work.
Take a fresh snapshot after navigation or DOM-changing actions.
Keep console and network queries filtered or paginated to reduce noise.
Save large artifacts to disk with filePath when the tool supports it.
If you need an already-running browser session, point the MCP server at it with --browser-url=... instead of launching a fresh instance.

Common Patterns

Reproduce a bug: navigate, wait, snapshot, interact, inspect console and network.
Verify a fix: repeat the exact user path and compare visible state plus console and request results.
Gather evidence: capture a screenshot, the failing request, and the matching console message.

When Not to Use It

If the question is purely about static source code and no live browser state matters.
If the MCP server is running in a restricted mode that does not expose the tools you need.

---name: chrome-devtoolsdescription: Use Chrome DevTools MCP to inspect live pages, reproduce browser issues, automate user flows, inspect console and network activity, and verify frontend fixes in a real Chrome session. Trigger when the user mentions browser bugs, client-side errors, broken forms, flaky UI behavior, or asks to interact with a site directly.---Use this skill when source inspection alone is not enough and Codex should operate a live browser.## Default Flow1. Open or reuse a page with `new_page` or `navigate_page`.2. Wait for the relevant UI if needed with `wait_for`.3. Capture structure with `take_snapshot`.4. Interact using `uid` values from the snapshot.5. Inspect the relevant evidence surface: - `list_console_messages` or `get_console_message` for runtime errors - `list_network_requests` or `get_network_request` for API and asset failures - `take_screenshot` when visible state matters - `evaluate_script` for targeted DOM or app-state checks6. Re-run the smallest verification path after each code change.## Working Rules- Prefer `take_snapshot` over screenshots for navigation and form work.- Take a fresh snapshot after navigation or DOM-changing actions.- Keep console and network queries filtered or paginated to reduce noise.- Save large artifacts to disk with `filePath` when the tool supports it.- If you need an already-running browser session, point the MCP server at it with `--browser-url=...` instead of launching a fresh instance.## Common Patterns- Reproduce a bug: navigate, wait, snapshot, interact, inspect console and network.- Verify a fix: repeat the exact user path and compare visible state plus console and request results.- Gather evidence: capture a screenshot, the failing request, and the matching console message.## When Not to Use It- If the question is purely about static source code and no live browser state matters.- If the MCP server is running in a restricted mode that does not expose the tools you need.

Frequently asked questions