メニュー
How to use Chrome DevTools MCP for browser debugging. Use when you need to inspect pages, take screenshots, debug UI issues, or verify visual changes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | chrome-debug |
| description | How to use Chrome DevTools MCP for browser debugging. Use when you need to inspect pages, take screenshots, debug UI issues, or verify visual changes. |
This skill explains how to use the Chrome DevTools MCP for browser debugging and UI verification.
Before using Chrome DevTools MCP, you must launch Chromium in headless mode with remote debugging enabled:
npm run chrome &
This runs Chromium with the required flags for Docker/containerized environments:
--remote-debugging-port=9222 - Enables MCP connection--headless=new - Runs without display (modern headless mode)--no-sandbox - Required for Docker--disable-gpu - Avoids GPU issues in containers--no-first-run - Skips first-run setup dialogsWait a few seconds for Chrome to start before using MCP tools.