この記事では、Chrome DevTools MCPに追加されたAIエージェント向けの機能についてまとめています。JavaScriptの実行を安全に制御する方法、メモリ使用量を調べる方法、PWA（スマートフォンアプリのように使えるWebサイト）を確認する方法を、Web制作初心者にもわかりやすく紹介します。
Chrome DevTools MCPは、AIエージェント（指示に沿って調査や操作を進めるAI）とChrome DevTools（Webページを検証する開発者向け機能）をつなぐ仕組みです。公式記事では、2026年9月22日にChrome 153とChrome 154のStable版（一般公開版）へ展開された機能として紹介されています。
結論：AIに任せる範囲を細かく制御できるようになった
今回の重要な変化は、AIエージェントに「調べて」と頼むだけでなく、どの操作を許可するかを意識して検証できる点です。
- JavaScript実行を無効化・制御できる
- ヒープスナップショット（メモリの使用状態を保存した記録）からオブジェクトを探せる
- 保持サイズ（メモリをどれだけ占有しているか）を調べられる
- V8実行コンテキスト（JavaScriptが動く環境）がメモリを保持していないか分析できる
- PWAのインストールとライフサイクル（起動や更新などの状態変化）を自動確認できる
実際に使う場面を考えると、AIがページの原因調査を進める際に、不要なスクリプト実行を止めたり、メモリリーク（使い終わったメモリが解放されない状態）を探したりできます。人が画面を何度も確認する作業を減らせるのが大きなメリットです。
従来のDevTools操作と何が変わるのか
これまでは、制作者が自分でElementsやConsole、Memoryなどのパネルを開き、ログを確認しながら原因を絞り込む必要がありました。AIを使う場合も、指示の出し方が大まかだと、意図しないJavaScript実行や調査範囲の広がりが起こりやすい点が壁になります。
ただし、AIが自動ですべてを正しく判断するわけではありません。調査結果を確認する人は必要です。AIを「代わりに作業する人」ではなく、「調査を補助するアシスタント」として使うと、初心者でも扱いやすくなります。
初心者向け：まずはJavaScript実行の制御を試す
最初に試すなら、ページを壊しにくいJavaScript実行の制御から始めるのがおすすめです。実際の画面では、次の流れで準備します。
- Chromeで確認したいWebページを開きます。
- 右上のメニューから「その他のツール」を開き、「デベロッパーツール」を選びます。
- DevToolsが開いたら、上部の「Console」タブをクリックします。Console（JavaScriptの命令やエラーを確認する画面）は、AIの調査結果を確認する場所です。
- AIエージェント側でChrome DevTools MCPを利用する設定を開きます。設定画面の名称や配置は、利用するエージェントによって異なります。
- まずは「ページのエラーを確認する」「Consoleの内容を要約する」のように、読み取り中心の指示を出します。
- JavaScriptを実行する指示を出す前に、実行を無効化または制御する設定を確認します。
最初からフォーム送信やデータ変更を含む操作を頼むのは避けましょう。読み取り専用の調査から始めると、AIの返答と実際の画面を比較しやすくなります。
メモリ解析で何がわかるのか
ページを長時間開いていると動作が重くなる場合、原因の候補がメモリに残り続けていることがあります。今回の機能では、ヒープスナップショットを使って、どのオブジェクトが残っているか、どれくらいの保持サイズがあるかを調べられます。
ヒープスナップショットは、部屋の中を撮影した写真に似ています。写真を比べることで、片付けたはずの物が残っていないか確認できます。Web制作では、ページを開いた直後と、画面を何度か操作した後の状態を比べると、不要なデータが増えていないか判断しやすくなります。
- DevTools上部の「Memory」タブを開きます。
- ヒープスナップショットを選び、取得前の状態を記録します。
- ページ内でメニューの開閉や画面遷移など、問題が起きる操作を行います。
- もう一度スナップショットを取得し、オブジェクト検索で増えた情報を探します。
- 保持サイズを確認し、特定のデータが残り続けていないかをAIに整理させます。
ここでのポイントは、数字が大きいだけで不具合と決めつけないことです。画像や一時データが一時的に増えている場合もあります。操作前後の差分と、ページの実際の重さを合わせて判断してください。
PWAのインストールとライフサイクルを確認する
PWAは、ブラウザで動くWebサイトにアプリのような使い勝手を加えたものです。今回の専用ツールを使うと、インストールできるか、起動後に正しく動くか、状態変化に問題がないかを自動確認しやすくなります。
実際の確認では、まず対象ページを開き、AIエージェントに「PWAとしてインストール可能か確認する」「インストール後の起動とライフサイクルを確認する」といった形で依頼します。その後、ブラウザ上のインストール表示、起動状態、更新後の挙動を人の目でも確認します。
手作業だけでは、インストール後の起動や更新を毎回確認する負担が大きくなります。社内サイトやキャンペーンページを継続的に管理する人にとって、確認漏れを減らせる点が役立ちます。
初心者がつまずきやすいポイントと対処法
AIに任せれば安全だと思ってしまう
JavaScript実行を含む操作は、ページの状態を変える可能性があります。最初は検証用ページやコピーした環境で試し、実行前に何を変更するのか確認しましょう。
メモリの数字だけを見てしまう
メモリ解析は、数字の大小だけでなく、同じオブジェクトが操作後も残っているかを見る作業です。取得するタイミングをそろえ、複数回の結果を比べてください。
MCPの設定場所が見つからない
MCP（AIツールと外部機能を接続する共通の仕組み）の設定画面は、利用するAIエージェントによって異なります。Chrome DevTools側だけを探し続けず、利用中のエージェントのMCP設定からChrome DevToolsの接続項目を確認してください。
料金や無料プランはある？
今回確認できた公式記事では、Chrome DevTools MCPの新機能について追加料金や有料プランの案内は示されていません。また、AIエージェント側の料金はサービスごとに異なります。導入前に、利用中のAIサービスや社内契約の料金、利用回数の制限を確認してください。
つまり、機能の紹介だけを見て「すべて無料」と判断するのは避けるべきです。Chrome本体やDevToolsの利用環境に加えて、接続するAIエージェントの条件を分けて確認すると、予想外の費用を防げます。
向いている人・向いていない人
- 向いている人：AIを使ってWebページのエラー調査を効率化したい人、社内サイトの確認作業を減らしたい人、PWAやメモリ問題を体系的に調べたい人。
- 向いていない人：まずHTMLやCSSの基本だけを学びたい人、検証環境を用意せず本番ページで直接試したい人、AIの結果を確認する時間を取れない人。
まとめ：最初の一歩は読み取り中心の調査から
Chrome DevTools MCPでは、AIエージェント向けにJavaScript実行の制御、メモリ解析、PWAのインストールとライフサイクル確認が追加されました。従来は人が画面を切り替えながら行っていた調査を、AIに整理させやすくなっています。
今日から始めるなら、検証用ページを開き、Consoleのエラー確認をAIに依頼してみてください。次にJavaScript実行の制御を確認し、慣れてきたらメモリ解析やPWAテストへ進みます。安全な環境で小さく試すことが、挫折せず使いこなす最初の一歩です。
よくある質問
Chrome DevTools MCPは初心者でも使えますか？
使えます。ただし、最初は読み取り中心の指示から始めてください。ページを変更する操作は、仕組みを理解してから試すと安全です。
JavaScript実行を無効にすると何が変わりますか？
AIエージェントがJavaScriptを実行する範囲を制限できます。ページの状態を変えたくない調査では、実行を抑えることで意図しない操作を防ぎやすくなります。
メモリ解析はどんなときに使いますか？
ページを長く使うと重くなる、画面遷移を繰り返すと動作が不安定になる、といった場合に使います。操作前後のヒープスナップショットを比べると、残り続けるデータを探しやすくなります。
PWAを作っていなくても役立ちますか？
通常のWebサイト制作では優先度は高くありません。PWAとして公開するサイトや、インストール後の動作まで確認したいプロジェクトで特に役立ちます。
