DevTools の新機能(Chrome 149)

公開日: 2026 年 6 月 2 日

Chrome 149 では、AI アシスタンスが大幅にアップグレードされ、[アプリケーション] パネルに試験運用版の WebMCP デバッグツールが導入され、コード補完のサポートが CSS にまで拡大されます。

エージェント向け DevTools

エージェント向けの Chrome DevTools の MCP サーバーと CLI が正式に安定版になりました。こちらで発表全文をご覧ください

v1.1.1 リリースまでに新たに追加された主な機能とツールは次のとおりです。

  • カスタムのサードパーティ製ツール(ページ公開型): ページで JavaScript を介してカスタム デバッグツールを定義できるようになりました。このツールは、エージェントの DevTools で検出して呼び出すことができます。
  • WebMCP デバッグ: エージェント用の DevTools で WebMCP ツールを一覧表示して実行できるようになりました。
  • カスタム HTTP ヘッダーのエミュレーション: エミュレーション ツールに HTTP ヘッダー(認証トークンやカスタム ユーザー エージェントなど)のサポートを追加します。

サードパーティ製ツールと WebMCP のデバッグはまだ試験運用段階であり、デフォルトでは有効になっていません。これらのツールの使用方法については、ツール リファレンスをご覧ください。これらの機能が本番環境で使用できるようになったら、developer.chrome.com で詳細なドキュメントを提供します。

エージェント用 DevTools に関する最新の更新情報や、コントリビューションについては、GitHub リポジトリをご覧ください。ドキュメントで始めるか、Google I/O の包括的な動画セッション Supercharge your AI coding workflow with Chrome DevTools for agents で最新情報を確認してください。

AI アシスタンス

AI アシスタンス パネルのユーザー インターフェースが大幅に更新され、会話機能のエクスペリエンスを改善し、ページに関するより詳細な分析情報を提供する新しいツールが追加されました。

  • エージェントのウォークスルー: AI アシスタントが、プレーン テキストの Markdown ではなく、チャット インターフェース内にウィジェットを直接レンダリングするようになりました。これらのウィジェットは、コア ウェブ バイタルと関連する分析情報、LCP 要素、LCP の内訳、ボトムアップ スレッド アクティビティなどをカバーしています。ウィジェット内の [Reveal] リンクをクリックすると、DevTools 内のこの情報のソースに移動します。
  • コーディング エージェントにコピー: 会話の最後に、会話をコピーするための専用ボタンが表示されるようになりました。会話は、プロンプトとして要約されたものか、逐語録のいずれかとしてコピーされ、選択したコーディング エージェントに貼り付けることができます。
  • 機能のアップグレード: AI アシスタンスが Lighthouse と関連する分析情報にアクセスできるようになり、ページを包括的に分析して、的を絞ったアドバイスを提供できるようになりました。
  • 回答の改善: Gemini 3 を基盤とし、前文を洗練させたことで、AI アシスタンスがより簡潔で実用的な回答を提供できるようになりました。
  • ナビゲーションの改善: 上矢印キーと下矢印キーを使用して、以前のチャット プロンプトをナビゲートできるようになりました。これにより、以前のクエリをすばやく直感的に絞り込んだり、再実行したりできます。
「このページのパフォーマンスを改善するにはどうすればよいですか?」というプロンプトに対する AI アシスタント Astro.js のデモサイト DevTools Times で、エージェントのチュートリアル、ウィジェット、コーディング エージェントへのコピー(Antigravity)が表示されている様子。

専用のフィードバック バグにコメントして、ご意見をお聞かせください。コーディング エージェントへのコピーを優先するため、Chrome 152 で AI アシスタンスによる自動スタイリング修正のサポートを終了します。

WebMCP

このリリースでは、[アプリケーション] パネルのサイドバーに試験運用版の WebMCP デバッグツールが導入されました。WebMCP(Web Model Context Protocol)を使用すると、ウェブページで、LLM エージェントが使用するツールを登録できます。提案されている標準について詳しくは、ドキュメントをご覧ください。

新しいデバッグツールを使用すると、次のことができます。

  • クライアントサイドのツールとそのスキーマを検査します。
  • カスタム パラメータを使用してツール実行を手動で実行します。
  • アクティブまたは保留中のツール呼び出しイベントを追跡してフィルタします。
  • 実行ステータスをモニタリングし、戻りペイロードを検査します。

WebMCP は、早期プレビュー版の提案中のウェブ標準です。chrome://flags で #devtools-webmcp-support フラグと #enable-webmcp-testing フラグを有効にして、テストを開始します。

DevTools の [アプリケーション] パネルにある新しい WebMCP デバッグツール。
新しい WebMCP デバッグツールでデモサイト L'Atelier を検査し、過去のツール呼び出し、利用可能なツール、フィルタ オプションを表示している様子。

Chromium の問題: 494516094

CSS のコード補完

[スタイル] タブに、コンソール パネルとソースパネルのサポートを基盤として、Gemini を使用した CSS のコード補完機能が追加されました。コード候補を有効にするには、[設定] > [AI イノベーション] > [コード候補] に移動します。

これにより、正確な構文を覚えることなく、グラデーションやボックス シャドウなどの CSS プロパティの複雑な組み合わせを試したり、複数の関連プロパティを使用してグリッド レイアウトやフレックス レイアウトをすばやく構築したりできます。

[スタイル] タブの下部にあるツールバーには、読み込みスピナーでステータスが表示されます。入力すると候補が更新またはクリアされ、AI によって生成されたテキストが手動編集に関連した状態が維持されます。

APCA 色コントラスト ガイドラインが安定版に昇格

高度な知覚コントラスト アルゴリズム(APCA)のコントラスト計算ツールが試験運用段階を終了し、標準のユーザー設定として利用できるようになりました。APCA は、従来の AAA/AA コントラスト ガイドラインを、最新のディスプレイとテキスト レンダリングに最適化された最新の知覚コントラスト モデルに置き換えます。

[設定 > 設定 > 要素 > APCA コントラスト ガイドラインを有効にする] にあるチェックボックスを使用して、APCA ガイドラインを有効または無効にできるようになりました。

DevTools の設定にある APCA アルゴリズムの切り替えと、[スタイル] タブで有効になっている新しいアルゴリズム。
DevTools の設定にある APCA アルゴリズムの切り替えと、[スタイル] タブで有効になっている新しいアルゴリズム。

ダイナミック Device Mode のユーザー エージェント

レスポンシブ デバイスモードでは、以前はハードコードされたユーザー エージェント文字列(Android 6.0; Nexus 5)が使用されていました。報告された OS が 10 年以上前のものと認識されたため、最新のウェブサイトで機能が低下したり、互換モードがトリガーされたりしていました。

ハードコードされたユーザー エージェントは、現在の暦年に基づいて自動更新される動的なヒューリスティックに置き換えられました。これにより、DevTools は手動メンテナンスを必要とせずに、常に妥当な最新の環境をレポートします。

その他のハイライト

このリリースには、次のような軽微な改善とバグの修正が含まれています。

  • コンソール: コンソール パネルのツールバーに [すべて折りたたむ / 展開する] 切り替えボタンを追加しました。これにより、アクティブなコンソール グループとスタック トレースをすべて一度に展開または折りたたむことができます。 (427657550)
  • アプリケーション: アプリケーション メタデータ ビューのストレージ バケット フィールドの静的テキストが、クリック可能なハイパーリンクに置き換えられました。バケットのリンクをクリックすると、[ストレージ バケット] サイドバー パネルでそのバケットが自動的にハイライト表示されます。(435311130
  • アプリ: クラッシュの回帰を解決した後、Service Worker の完全なストレージ検査のサポートを再度有効にしました。 (406991275466134219)
  • アプリケーション: プリロード パネル内で form_submission 事前レンダリング イベントを検査するサポートを追加しました。(346555939488078903
  • アプリ: デバイスにバインドされたセッション認証情報(DBSC)の管理を実装しました。これにより、デベロッパーはコンテキスト メニューから、または Delete キーまたは Backspace キーを押して、アクティブなセッションをクリアまたは削除できます。(471017387
  • 要素: [問題] パネルに表示されている非表示の問題を表す DOM ノードのハイライト表示が、問題フィルタ アクションに応じて動的に更新(表示または非表示)されるようになりました。(40272723
  • ネットワーク: サーバー送信イベント(SSE)が完全にシリアル化され、HAR エクスポートに含まれるようになりました。これにより、継続的なライブ イベント ストリームのキャプチャを保存して、DevTools に再インポートできるようになりました。(494294071
  • パフォーマンス: ライブ指標ビューでの Core Web Vitals のトラッキングを修正し、トラッキングをメインフレームの実行コンテキストに厳密に固定して、動的 iframe のチャーンによって指標がリセットされないようにしました。(494350655
  • パフォーマンス: web-vitals を v5.2.0 にアップグレードし、INP モニタリング中のメモリリークに対するネイティブ アップストリーム修正を導入しました。(484342204