イメージアート（当サイト作成）
Google公式。AIがWebページの中身や通信を調べられるようになる。
#Google公式#デバッグ
ミロンドが自分で確かめたこと
- 2026年8月23日「配布元を見る」の行き先が、今も開けることを確認しました。
- 2026年7月30日公式の説明を読んで、開発が止まったというサインが無いことを確認しました。
- 2026年8月25日ミロンドが毎日数えている記録では、この17日間で お気に入りが933件増えました（今も使われ続けています）。
ミロンドは掲載しているすべての行き先を定期的に開いて、今も使えるかを確かめています。 利用ルールは名前だけで判断せず、原文を読んで確認しています。
「MCP」47本の中での位置
- APIキーの用意がいらないこの分野で28本
- 作ったものを仕事に使ってよいと確認できているこの分野で45本
- 黒い画面（ターミナル）の操作が要りますそうでないものが3本 →
- 入れた内容は公開元に送られますそうでないものが17本 →
上の条件をすべて満たすものは、47本中27本です。
この数字は、ミロンドが掲載している道具を1本ずつ同じ基準で調べた結果から数えています。
これは何？AIに道具を持たせる接続部品（MCP）
できること
「このページが重い理由を調べて」と頼むと、AIが実際にChromeでページを開き、表示速度やエラー、通信の中身を確認して答えてくれる。人がF12の画面を見て調べていた作業を任せられる。
誰に効く？
Web開発のデバッグをAIに手伝わせたい人
用意するもの
と、ClaudeやCursorなどに対応したAI。Chromeも必要
時間のめやす
10〜20分
使うとこうなる
- 1Node.jsを入れる
- 2claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest のように、使っているAIに登録する
- 3AIとの会話で「このページの表示が遅い原因を調べて」のように頼む
作れるもの・できることの例
表示が遅い原因の切り分け、リンク切れやエラーの洗い出し、スマホ表示での崩れの確認
使えるようになるまでの手順をひらく
- 対応のAIアプリ（Claude Desktop / Claude Code など）を用意
- そのアプリの設定画面（またはコマンド）でこの部品を登録
- あとはAIに日本語で「〜して」と頼むだけ。AIがこの道具を使ってくれます
こんな人には向かないかも
- MCP対応のAIアプリ（Claude等）をまだ使っていない人
迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って 「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。
むずかしそう？ 同じジャンルで、もっと始めやすいのはこちら
注意点
Web制作をする人向け。AIが実際にブラウザを操作して外部サイトを開くため、社内システムなど見せたくないページでは使わないこと。
ひとことメモ
Google（Chrome開発チーム）の公式提供。動作は手元のChromeで、AI側には調べた結果が渡る。
このツールが活躍する場所
やりたいことから探す
Chrome DevTools MCPについてよくある質問
- Chrome DevTools MCPは無料で使えますか？
- 無料で使えます。自分のパソコンの中で動くタイプなので、使った量に応じた料金もかかりません。
- Chrome DevTools MCPを使うのに、インストールや専門知識は必要ですか？
- Claude などMCPに対応したAIアプリに接続して使います。単体では動きません。
- Chrome DevTools MCPはスマホでも使えますか？
- スマホには対応していません。パソコンが必要です。
- Chrome DevTools MCPは仕事（商用）で使えますか？
- ライセンスは Apache-2.0 で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。
似ている道具との違い
同じ用途の道具と、使う前に効いてくる条件を並べました。
| 道具 | 黒い画面 | APIキー | 外部送信 | スマホ | 仕事に使える | 最終更新 |
|---|---|---|---|---|---|---|
| Chrome DevTools MCP（このページ） | 要る | いらない | あり | むずかしい | 可 | 2026年8月 |
| MCP Servers | 要る | いらない | あり | むずかしい | 可 | 2026年8月 |
| Context7 | 要る | いらない | あり | むずかしい | 可 | 2026年8月 |
| codebase-memory-mcp | 要る | いらない | なし | むずかしい | 可 | 2026年8月 |
「外部送信あり」は、入力した内容がどこかのサーバーに送られることを指します。 社外に出せない資料を扱うときは「なし」を選んでください。
MCPのほかのツール
Chrome DevTools MCPが合わなかったときの、同じ用途の候補です。
MCP Servers
AIに外部ツールをつなぐ公式部品集
はじめやすい・黒い画面（ターミナル）が要る
Context7
AIに最新の技術文書を読ませる接続部品
はじめやすい・黒い画面（ターミナル）が要る
codebase-memory-mcp
巨大なプログラムをAIが必要な所だけ読めるようにする
はじめやすい・黒い画面（ターミナル）が要る
Playwright MCP
AIにブラウザ操作の腕を持たせる公式部品
はじめやすい・黒い画面（ターミナル）が要る
GitHub MCP Server
AIにGitHub操作を任せる接続部品
準備がいる・黒い画面（ターミナル）が要る
code-review-graph
AIにコードの地図を渡して、読む量を減らす
はじめやすい・黒い画面（ターミナル）が要る