chromedevtools/chrome-devtools

Chrome DevTools を MCP 経由で利用し、効率的なデバッグ、トラブルシューティング、ブラウザ自動化を実現します。Web ページのデバッグ、ブラウザ操作の自動化、パフォーマンス分析やネットワークリクエストの調査に使用します。このスキルは `--slim` モード(MCP 設定)では適用されません。

chrome-devtools とは?

このスキルは、Chrome DevTools を MCP(Model Context Protocol)を介して呼び出すことで、AIエージェント(例:Claude Code、Cursor など)がブラウザの内部状態に直接アクセスし、操作することを可能にします。主な用途は、Web ページのデバッグ(コンソールログの確認、ブレークポイントの設定など)、ブラウザ操作の自動化(クリック、フォーム入力、ページ遷移)、パフォーマンス分析(パフォーマンスプロファイリング、メモリ使用状況の確認)、ネットワークリクエストの調査(リクエスト/レスポンスヘッダーの確認、タイミング分析)です。このスキルは `--slim` モードでは利用できず、フル機能の MCP 設定が必要です。開発者は AI に「この要素のスタイルを確認して」「ページのパフォーマンスを分析して」「ネットワークエラーの原因を調査して」といった指示を与えることで、ブラウザの開発者ツールと同様の操作を自動化できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp/tree/main/skills/chrome-devtools

Installed? Explore more 生産性&コラボレーション skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

chrome-devtools は何をしますか?

Chrome DevTools を MCP 経由で利用し、効率的なデバッグ、トラブルシューティング、ブラウザ自動化を実現します。Web ページのデバッグ、ブラウザ操作の自動化、パフォーマンス分析やネットワークリクエストの調査に使用します。このスキルは --slim モード(MCP 設定)では適用されません。

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

chromedevtools/a11y-debugging

Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

chromedevtools/chrome-devtools-cli

Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.

chromedevtools/cookie-debugging

Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third-party cookie/SameSite/Partitioned cookie warnings.

chromedevtools/debug-optimize-lcp

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.

chromedevtools/memory-leak-debugging

Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools.

chromedevtools/troubleshooting

Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.

関連スキル