DeepDive Chrome DevTools MCP なぜこれを使うのか、実用までの工夫

DeepDive Chrome DevTools MCP なぜこれを使うのか、実用までの工夫 Claude Code Meetup Japan #3 (Claude Code祭り!)

Chrome DevTools MCPとは ● ● ● Claude Codeから Google Chrome をコントロールできる MCP server Chrome の DevTool 開発チームが開発してる ブラウザでアクション起こしたり、スクショ・コンテンツ取得したり

Kuu - 自己紹介 ● ● ● Software Engineer at Mercari Kuu Systems - 受託開発 AIAU(AIエージェントユーザー会) Codex ambassador Cognition ambassador Codex Meetup Tokyo Harness Engineering Meetup Tokyo ○ ○ ○ ○ ● 趣味 ○ ○ (海外)旅行 Codex CLI long run 生活 花粉症が治ったと思ったけど、ずっと在宅なだけだった

Claude in Chrome を使えばいいじゃない Claude が推奨してるClaude からGoogle Chrome を操作する方法

Claude in Chrome を使えばいいじゃない Claude が推奨してるClaude からGoogle Chrome を操作する方法 セキュリティ上の理由により Claude in Chrome は利用不可

Claude in Chrome を使えばいいじゃない Claude が推奨してるClaude からGoogle Chrome を操作する方法 上に政策あれば下に対策あり

セキュリティルールを守りつつ、ClaudeがGoogle Chromeを使う ● ● ● Claude for Chrome(Google Chrome拡張機能) は使わない 怪レいMCPとか、野良 code は使わない Google Chrome を使う（正式ブラウザなので）

Google Chrome のChrome DevTools Protocol ● Chrome DevTools Protocolというものが存在してる ○ ○ ● ● https://chromedevtools.github.io/devtools-protocol/ DOM触れて、ネットワーク見れて、ログを読める Protocol chrome --remote-debugging-port xxx を使ってLocalhostにweb server を立てて 色々できる 理論上、 Claude Code に DevTools Protocol を喋らせれば使える ○ 現実的には、無駄が多い

• https://chromedevtools.github.io/devtools-protocol/

Chrome DevTools MCP ● Chrome DevTools Protocol をMCP server としてラップしたもの ○ 生データではなく構造化して Claude Code がやりとりできる

なぜ、PlaywrightやSeleniumではないのか ● ● ● 基本的には、 Chrome DevTools MCP(Protocol)をラップしたもの Before Opus 4.6 eraにはAIから扱いやすく良さげだった After Opus 4.6 では、抽象度が高すぎてtoo much

なぜ、PlaywrightやSeleniumではないのか ● ● ● 基本的には、 Chrome DevTools MCP(Protocol)をラップしたもの Before Opus 4.6 eraにはAIから扱いやすく良さげだった After Opus 4.6 では、抽象度が高すぎてtoo much

Chrome DevTools MCP の良いところ+ ● ログイン状態を保持できる ○ ● ● ● IDP認証が必要な環境でも活用しやすい GUIでブラウザ見れるので状態把握しやすい 元がDevToolなので開発者が必要な情報を同時に取得できる 実践例 ○ ○ ○ ○ 開発したWeb app を Claude Codeに操作させる Claude Codeがバグっぽい挙動を見つける Claude Code が Chrome DevTools MCP経由でConsole log を見て原因把握 修正後、Claude Code が動作確認してバグ修正を Verify

Chrome DevTools MCP の良いところ2 ● Chrome DevTools MCPにPR descriptionを整備させる ○ ○ ● Notionを活用するとき ○ ○ ● Chrome DevTools MCP でスクショ撮らせる GitHubをそのまま開いて、アップロード操作をさせる Notion MCP では画像のアップロードができない Notion を Chrome DevTools MCP に開かせてアップロード操作させる 会社の面倒な事務作業を... ○ ごほごほ

実用時のHelp ● Chrome DevTools MCP からChromeに接続できない ○ ○ ● Port 違い or すでに使われてる portだったり Chrome を一度落としてサイド接続すれば直る 画面の把握にスクショではContext食い尽くす ○ Snapshot(Dom tree)を取得できるので、そちらを試してみるの良さそう

まとめ ● ● ● ● Chrome DevTools MCPは、Claude CodeがChromeを操作するサーバーです。 セキュリティを確保し、「Claude in Chrome」利用不可の環境に対応します。 ログイン状態保持で、IDP認証環境での活用を容易にします。 開発者情報も取得でき、動作検証やバグ修正に活用可能です。