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 デバッグはまだ試験運用版であり、デフォルトでは有効になっていません。WebMCP ツールの詳細についてはツールのリファレンス をご覧ください。サードパーティ製ツールの詳細については、ドキュメントをご覧ください

エージェント向け DevTools に関する最新のアップデートについては、 GitHub リポジトリをご覧ください。また、投稿も受け付けています。 ドキュメントで始めるか、 Google I/O の包括的な動画セッション Supercharge your AI coding workflow with Chrome DevTools for agents で最新情報を入手してください。

AI アシスタンス

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

  • エージェントのウォークスルー: AI アシスタンスで、書式なしテキストの Markdown ではなく、チャット インターフェース内にウィジェットが直接レンダリングされるようになりました。これらのウィジェットには、Core Web Vitals と関連する分析情報、LCP 要素、LCP の内訳、ボトムアップ スレッド アクティビティなどが含まれます。ウィジェット内の [表示] リンクをクリックすると、DevTools 内のこの情報のソースに移動します。
  • コーディング エージェントにコピー: 会話の最後に専用のボタンが表示され、会話をコピーして、選択したコーディング エージェントに貼り付けることができます。会話は、プロンプトとして要約するか、そのままコピーできます。
  • 機能のアップグレード: AI アシスタンスで Lighthouse と 関連する分析情報にアクセスできるようになり、ページを包括的に分析して 的を絞ったアドバイスを提供できるようになりました。
  • レスポンスの改善: AI アシスタンスは、Gemini 3 を使用し、 プリアンブルを改良することで、より簡潔で実用的な回答を提供します。
  • ナビゲーションの改善: [上矢印] キーと [下矢印] キーを使用して、以前のチャット プロンプトを移動できるようになりました。これにより、以前のクエリをすばやく直感的に絞り込んだり、再実行したりできます。
プロンプト「このページのパフォーマンスを改善するにはどうすればよいですか?」に対する 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 デバッグツール。
デモサイト L'Atelier を検査する新しい WebMCP デバッグツール。 過去のツール呼び出し、利用可能なツール、フィルタ オプションが表示されています。

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