chrome-devtools は何をしますか？
Chrome DevTools MCP を使用した専門家レベルのブラウザ自動化、デバッグ、パフォーマンス分析。Webページの操作、スクリーンショットの取得、ネットワークトラフィックの分析、パフォーマンスプロファイリングに使用します。
概要
このスキルは、Chrome DevTools Protocol を介して Chrome ブラウザを制御する MCP (Model Context Protocol) サーバーを提供します。AIエージェントはこれを利用して、ブラウザの操作、Webページの検査、パフォーマンスデータの収集をプログラム的に行うことができます。
主な機能
- ブラウザ自動化: ページのナビゲーション、クリック、フォーム入力、スクリーンショット取得
- ネットワーク分析: リクエスト/レスポンスの監視、フィルタリング、パフォーマンス指標の収集
- JavaScript実行: コンテキスト内での任意の JavaScript コードの実行と結果取得
- DOM検査: 要素の選択、属性の取得、スタイル情報の読み取り
- パフォーマンスプロファイリング: CPUプロファイル、メモリスナップショット、タイムラインデータの収集
- コンソールログ: ブラウザコンソールからのログ、警告、エラーの取得
使用方法
インストール
npm install -g @anthropic/chrome-devtools-mcp
設定
MCP サーバーを起動し、AIエージェント（Claude Code など）に接続します。
npx @anthropic/chrome-devtools-mcp --headless
--headless フラグを指定するとヘッドレスモードで起動します。指定しない場合は、実際のブラウザウィンドウが表示されます。
Claude Code との統合
Claude Code を使用している場合、.claude/settings.json に以下を追加します：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "@anthropic/chrome-devtools-mcp"],
"env": {}
}
}
}
利用可能なツール
| ツール名 | 説明 |
|---|---|
navigate | 指定されたURLに移動 |
click | セレクタで指定された要素をクリック |
type | 要素にテキストを入力 |
screenshot | 現在のページのスクリーンショットを撮影 |
evaluate | ページコンテキストで JavaScript を実行 |
getNetworkLogs | ネットワークリクエストログを取得 |
getConsoleLogs | コンソールログを取得 |
startPerformance | パフォーマンスプロファイリングを開始 |
stopPerformance | パフォーマンスプロファイリングを停止し結果を取得 |
getDOMSnapshot | 現在のDOMスナップショットを取得 |
例
ページのスクリーンショットを撮影
ページ https://example.com に移動し、スクリーンショットを撮影してください。
ネットワークトラフィックの分析
https://example.com のネットワークリクエストを監視し、
すべてのAPIコールが 200 ステータスを返すことを確認してください。
フォームへの自動入力
https://example.com/login に移動し、
ユーザー名フィールドに「myuser」、パスワードフィールドに「mypassword」と入力し、
ログインボタンをクリックしてください。
注意事項
- このスキルは Chrome ブラウザに依存します。システムに Chrome または Chromium がインストールされている必要があります。
- ヘッドレスモードではブラウザUIは表示されませんが、すべての機能が利用可能です。
- ネットワークログやコンソールログは、ページのライフサイクル全体を通じて収集されます。
ライセンス
MIT License