Chrome Dev Tool(MCP)

public.icon

コードの変更をリアルタイムで検証する

AI エージェントで修正を生成し、Chrome DevTools MCP でソリューションが意図したとおりに動作することを自動的に確認します。

ネットワーク エラーとコンソール エラーを診断する

エージェントがネットワーク リクエストを分析して CORS の問題を特定したり、コンソールログを調べて機能が想定どおりに動作しない理由を把握したりできるようにします。

ユーザー行動をシミュレートする

ランタイム環境を検査しながら、ナビゲーション、フォームの入力、ボタンのクリックを行ってバグを再現し、複雑なユーザーフローをテストできます。

ライブ スタイリングとレイアウトの問題をデバッグする

AI エージェントにライブページへの接続、DOM と CSS の検査を依頼し、ブラウザのライブデータに基づいて、要素のオーバーフローなどの複雑なレイアウトの問題を解決するための具体的な提案を得ます。

パフォーマンス監査を自動化する

AI エージェントにパフォーマンス トレースを実行し、結果を分析して、LCP の数値が高いなどの特定のパフォーマンスの問題を調査するよう指示します。

code:mcp.json

{

"mcpServers": {

"chrome-devtools": {

"command": "npx",

}

}

}

code:terminal

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

code:terminal

command = "npx"

https://gyazo.com/9b82412d386e577a4dd673184be3d094

codexで使うと秒でコンテキストオーバーした