Ciying AI Directory
AI DirectorySkills
中文
Ciying AI Directory

Chrome DevTools MCP Skill for Debugging Local Pages in Codex

Use Chrome DevTools from Codex to inspect a development page, verify its console output, and capture browser behavior.

中文

Setup for Codex

Requires Node.js LTS, npm, current Chrome, and Codex with MCP support. Connect the full Chrome DevTools MCP tool set for this skill.

  1. Copy the pinned skills/chrome-devtools folder into the project's .agents/skills/chrome-devtools directory.
  2. Register the server with `codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --isolated --no-usage-statistics`, then reopen Codex. The server version resolves independently from the pinned skill.

Example task

Save an index.html containing `<title>Inventory demo</title><h1>Inventory demo</h1><script>console.log("inventory-demo-ready")</script>` to an empty folder. Serve that folder on localhost, then use $chrome-devtools to report the title and console marker from the local page.

Expected result

Chrome shows the Inventory demo title and reports inventory-demo-ready in the console.

Upstream documentation

Original SKILL.md on GitHub · Apache-2.0 license · Source reviewed

Frequently asked question

Does the Chrome DevTools skill install the MCP server for Codex?

The skill provides debugging instructions. Configure the Chrome DevTools MCP server separately and confirm its browser tools appear in the active Codex session.