この記事でわかること
この記事を読むと、2026年10月に更新されたChrome DevTools MCP（AIエージェントがブラウザを操作・検証するための仕組み）の新機能を、実際の操作レベルで使えるようになります。「AIに自動でコードを書いてもらうのは怖い」「本番環境で意図しない操作をされないか心配」という不安を持つ方でも、安全設定を正しく行えば問題なく活用できます。
DevTools MCPとは？まず全体像を押さえよう
Chrome DevTools MCP（Model Context Protocol）は、CursorやClaude DesktopなどのAIコーディングエージェント（AIが自動でコードを書いたり修正したりするツール）が、Chrome DevToolsを経由してブラウザの中身を調べたり操作したりするための橋渡し役です。
わかりやすく言うと、「AIアシスタントがあなたのブラウザの開発者ツールを直接触れるようにする仕組み」です。人間が手動でやっていたデバッグ（バグ探し）や動作確認を、AIが代わりにやってくれるようになります。
従来は、AIにコードを書いてもらっても「実際にブラウザで動くか」は自分で確かめるしかありませんでした。DevTools MCPを使うと、AIが自分でブラウザを開き、エラーを見つけ、修正案を出すところまで自動化できます。
2026年10月更新で何が変わったか
今回の更新で特に重要な変更が4つあります。初心者にとって一番うれしいのは「安全性の強化」で、AIが勝手に危険な操作をしないよう制御できるようになった点です。
①JavaScriptの実行を制御できるようになった
AIエージェントがブラウザ上でJavaScript（Webページを動かすプログラム）を自動実行するとき、意図しないデータの書き換えや外部送信が起きるリスクがありました。今回の更新で、JavaScript評価（AIがコードを実行すること）を無効化したり、実行できる範囲を限定したりする設定が追加されました。
たとえば「ページの読み込み速度を調べるだけで、データは変更しないでほしい」という場面で、JavaScript実行をオフにした状態で検証だけさせることができます。
②Agent Plugins 1.0で機能を拡張できる
Agent Plugins（エージェントに追加機能を持たせるプラグイン）が正式版1.0になりました。たとえば「特定のサイトのパフォーマンス計測だけを担当するプラグイン」を導入することで、AIができる操作の範囲を絞り込めます。用途に合わせた専用ツールを組み合わせるイメージです。
③ソースマップのオンデマンド読み込み
ソースマップとは、圧縮・難読化されたコード（公開用に小さくまとめたコード）と、元の読みやすいコードを対応させる地図のようなものです。今回から「必要なときだけ読み込む」仕組みになり、大きなプロジェクトでも動作が重くなりにくくなりました。
④ファイルシステム権限の細かい設定
AIがアクセスできるファイルやフォルダの範囲を設定できるようになりました。「プロジェクトフォルダの中だけ触っていい」「このフォルダは読み取り専用にする」といった制限をかけられます。誤って重要ファイルを上書きされるリスクを大幅に減らせます。
安全設定の手順｜AIが暴走しないための3ステップ
AIコーディングが不安な方でも、この手順通りにやれば安心して使い始められます。設定はChrome DevToolsの設定画面から行います。
- DevTools MCPサーバーを起動する
ターミナル（Macならターミナル、WindowsならPowerShell）を開き、npx @chrome/devtools-mcpと入力してEnterを押します。サーバーが起動したらブラウザでChrome DevToolsを開きます（F12キーまたは右クリック→「検証」）。 - JavaScript評価を制限する
DevToolsが開いたら、上部のタブ一覧から「Agents」パネルを選びます。左側の「Configuration（設定）」をクリックし、「Allow JavaScript evaluation（JavaScript評価を許可する）」のトグルをオフにします。これだけでAIがコードを勝手に実行するのを防げます。 - ネットワーク許可・ブロックパターンを設定する
同じConfiguration画面の「Network（ネットワーク）」セクションに進みます。「Allowed domains（許可するドメイン）」に検証したいサイトのドメインだけを入力します。それ以外のサイトへのアクセスはAIからブロックされます。ネットワークヘッダー（通信の詳細情報）に個人情報やAPIキーが含まれる場合は「Redact sensitive headers（機密ヘッダーを隠す）」をオンにしましょう。
最初はJavaScript実行オフ・ネットワーク制限ありの状態でスタートし、問題なさそうなら少しずつ権限を広げるのがおすすめです。初日から全権限を与えるのは避けてください。
メモリ解析の新機能｜重くなる原因をAIと一緒に探す
「ページを長時間開いていると重くなる」「スクロールするたびに引っかかる」という経験はないでしょうか。これはメモリリーク（本来解放されるべきデータがブラウザの記憶領域に残り続ける問題）が原因であることが多いです。
今回の更新で、ヒープスナップショット（ある時点でのブラウザのメモリの全体像を撮影したもの）の解析が大きく強化されました。具体的には以下の操作ができます。
- オブジェクト検索：メモリの中に残っている特定のデータ（たとえば特定の変数名）をキーワードで検索できます。膨大な情報の中から目的のものを素早く見つけられます。
- 保持サイズ・プロパティ名でのクエリ：「このデータが何MBを占めているか」「このプロパティ名を持つオブジェクトが何個残っているか」を絞り込み検索できます。Excelのフィルター機能のイメージです。
- V8実行コンテキストのメモリ調査：V8とはChromeがJavaScriptを動かすためのエンジン（エンジン＝処理の核）です。そのエンジンがどれだけメモリを使っているかを直接調べられます。
AIエージェントにこれらの解析を依頼すると、「このコンポーネントが原因でメモリが増え続けています。イベントリスナー（ユーザーの操作を検知する仕組み）を解除する処理が抜けています」といった具体的な原因と修正案をセットで返してくれます。
PWA検証の自動化｜インストール確認をAIに任せる
PWA（Progressive Web App）とは、Webサイトをスマホアプリのようにインストールして使える仕組みです。「ホーム画面に追加」ができるサイトがPWAの一例です。
PWAを正しく動かすには「インストールできるか」「オフラインでも動くか」「起動時の動作が正しいか」といった複数の条件を確認する必要があり、手動でのチェックは手間がかかります。
今回の更新でPWA専用の検証ツールが追加されました。DevToolsのAgentsパネルからAIに「PWAのインストール可否を検証して」と指示するだけで、インストール条件の充足確認・ライフサイクル（インストール→起動→更新→アンインストールの流れ）の動作確認・エラーが出た場合の原因特定を自動で行ってくれます。社内サイトをPWA化したい担当者の方には特に役立つ機能です。
初心者がつまずきやすいポイントと対処法
実際に使い始めると、最初に壁にぶつかりやすい場面が3つあります。
「Agentsパネルが表示されない」
ChromeのバージョンがDevTools MCPに対応していない可能性があります。Chromeを最新版に更新してから試してください（右上の三点メニュー→「ヘルプ」→「Google Chromeについて」で更新確認できます）。
「AIが設定を無視して操作してくる」
MCPサーバーの設定ファイル（configファイル）とDevTools側の設定が別管理になっています。両方で制限をかけないと片方が抜け穴になります。設定はDevToolsのConfiguration画面とMCPサーバーの設定ファイルの両方を確認してください。
「ヒープスナップショットが重すぎて開けない」
大規模なサイトのスナップショットは数百MBになることがあります。今回追加されたオンデマンド読み込みを活用し、最初は「特定のコンポーネントだけに絞ったスナップショット」を取るよう指示すると軽くなります。
料金・無料で使えるか
Chrome DevToolsおよびDevTools MCPサーバー自体は無料で使えます。追加費用は一切かかりません。ただし、AIコーディングエージェント側（CursorやClaude Desktopなど）は各サービスの利用規約・料金体系に準じます。無料プランでも基本的な機能は試せますが、大量のやり取りをする場合は有料プランが必要になることがあります。
こんな方に特におすすめ
- AIにコードを書いてもらっているが、本当に安全か不安な方
- 社内Webサイトの担当になったばかりで、パフォーマンス改善の方法がわからない方
- PWA化を検討しているが、検証工数を減らしたい方
- 「開発者ツールは難しそう」と敬遠していたが、AIを通じて触れてみたい方
逆に、すでにDevToolsを使いこなしていてAI連携に興味がない方や、セキュリティ上AIツール自体が禁止されている職場の方には不向きです。
よくある質問（FAQ）
Q. DevTools MCPはWindowsでも使えますか？
はい、使えます。ChromeとNode.js（JavaScriptをパソコン上で動かすための仕組み）がインストールされていれば、WindowsでもMacでも同じ手順で動作します。Node.jsは公式サイトから無料でダウンロードできます。
Q. AIが間違った修正をしてしまった場合、元に戻せますか？
ファイルシステム権限を適切に設定していれば、AIが直接ファイルを書き換えることは制限できます。さらにGit（ファイルの変更履歴を管理するツール）を使ってバージョン管理しておけば、万が一の場合でも変更前の状態に戻せます。AIに作業を任せる前にGitでコミット（変更を記録すること）しておく習慣をつけましょう。
Q. メモリ解析は専門知識がないと結果を読めませんか？
AIエージェントに「この結果をわかりやすく説明して、改善すべき箇所を教えて」と追加で依頼するだけで、専門用語なしの説明と修正案を返してくれます。最初は結果の意味がわからなくても問題ありません。
Q. 本番サイトに対して使っても大丈夫ですか？
JavaScript実行を無効化し、ネットワーク許可ドメインを本番サイトに限定した「読み取り専用モード」での検証なら安全です。ただし、最初はローカル環境（自分のパソコン上だけで動かす開発用の環境）やステージング環境（本番に近い状態でテストするための環境）で練習してから本番に適用するのを強くおすすめします。
今日からできる最初の一歩
まずはChrome DevToolsを開いて、Agentsパネルを探してみてください。パネルが見つかったら、JavaScript評価をオフにした状態でAIに「このページのパフォーマンスを調べて」と一言だけ指示してみましょう。AIが何を調べ、どんな情報を返してくれるかを体験するだけで、使い方のイメージがぐっとつかみやすくなります。設定を少しずつ広げながら、自分の作業スタイルに合った使い方を見つけてください。
参考・公式情報
📦 Amazonで関連商品を探す
