DevTools の新機能 - 2026 年 11 月

Matthias Rohmer

公開日: 2026 年 10 月 20 日

10 月に安定版としてリリースされた Chrome 155 と Chrome 156 では、11 月にブラウザに新しいデバッグ機能とオーサリング機能が追加されました。エージェント用の DevTools での CSS スタイル検査、[要素] での CSS アンカー配置用のインタラクティブな position-area エディタ、[アプリケーション] でのウェブ インストール マニフェストと広告の出所の診断などです。また、[Memory] でデッド コンテキスト変数を検出したり、[Network] で早期ヒントのプリロード警告と永続的なオーバーライドを検査したり、[Performance] でタイムラインをよりスムーズに移動したりすることもできます。

エージェント向け DevTools

Chrome DevTools MCP サーバーは、コーディング エージェントに CSS スタイル検査、構成ファイルのサポート、チャンク化されたトレース解析を追加します。

• CSS スタイルの検査: get_css_styles ツールを使用して、計算されたスタイルと一致したスタイルを検査します。このツールは、ページネーション（pageSize と pageIdx）をサポートし、一致したルール、継承されたルール、疑似要素、@keyframes、@ ルール（@position-try、@property、@function）をフォーマットします。
• 構成ファイルとパスの制御: 専用の構成ファイルを使用してサーバーフラグを管理し、カスタム ファイル システム ルートを構成します。CLI ではデフォルトで --allow-unrestricted-paths を使用します。
• チャンク化されたトレース バッファの解析: チャンク化されたトレース バッファ パーサーと 1.2 GB のデフォルトのトレース バッファを使用して、大規模なパフォーマンス記録を解析します。DevTools は、メモリリークを防ぐために、解析ごとにトレース エンジン インスタンスのスコープを設定します。
• ダイアログ処理とコンソールの永続性: 入力ツールのアクション中にトリガーされた JavaScript ダイアログを自動的に処理し、同じドキュメントのナビゲーション間でコンソール メッセージの履歴を保持します。
• メニューの更新: DevTools のメインメニューで [Get Chrome DevTools for agents] をクリックすると、設定手順が表示されます。

詳しくは、chrome-devtools-mcp リポジトリをご覧ください。

要素: ビジュアル position-area エディタ、暗黙的なアンカー選択、CSS オーサリングの更新

[要素] パネルに、CSS アンカー ポジショニング用のビジュアル ツールが導入され、CSS の検証機能が拡張されました。

• ビジュアル position-area エディタ: [スタイル] タブの position-area 宣言の横にあるインライン スウォッチをクリックして、アンカー グリッド領域を視覚的に選択し、軸を同時にまたは個別に構成し、self キーワードを切り替え、軸のないキーワードを短縮します。
• ポップオーバー装飾の暗黙的なアンカー選択: 要素に複数の暗黙的なアンカーがある場合、DOM ツリーでポップオーバー装飾を右クリックして、関連するアンカー要素を検査してジャンプします。
• アンカー配置ボックス オーバーレイ: アンカー配置要素をデバッグするときに、ビューポート オーバーレイでインセット変更されたコンテナ ブロック（IMCB）のマージン、パディング、ボーダー、コンテンツ ボックスを直接検査します。
• Flexbox エディタの wrap-reverse: [スタイル] タブのビジュアル Flexbox エディタから直接 flex-wrap: wrap-reverse を切り替えます。
• @starting-style の無効な CSS スタイルと継承されたルール: 無効な @starting-style ルールと Inherited from セクションを検査します。手動で展開および折りたたんだ状態は、更新後も保持されます。
• 複数のダッシュを含むカスタム プロパティとクラスの予測入力: 3 つ以上のダッシュで始まる CSS カスタム プロパティ（---theme-color など）を検査して編集し、[Add New Class] の予測入力の候補から、すでに適用されているクラスを除外します。

Chromium の問題: 553335561、438724570、413061413、397184392、539424116、533783988

アプリケーション: ウェブ インストール マニフェストの診断、広告の出所、ストレージ テーブルの更新

[Application] パネルと [Issues] パネルに、ウェブ インストール マニフェスト、広告スクリプトの出所、ストレージ検査の診断が追加されました。

• ウェブ インストール マニフェストの診断: [問題] パネルでウェブ インストール（navigator.install と <install>）のマニフェスト エラーを検査します。取得エラー、構文エラー、無効な start_url 値、名前または ID の欠落、マニフェストの欠落など、影響を受けるマニフェスト ファイルへの直接リンクが表示されます。
• 広告の出所の列と指標のドキュメント: [アプリケーション] パネルの [広告] セクションにある新しい [広告の出所] 列で、広告スクリプトが祖先スクリプト チェーンまたはフィルタリスト ルールと一致しているかどうかを確認できます。また、広告指標に関するドキュメントのツールチップと [詳細] リンクも表示されます。
• IndexedDB と Cookie テーブルの操作性: IndexedDB データグリッドで、スクロール位置を保持する動的な行の高さを使用してネストされたオブジェクトを展開し、キーボードまたはコンテキスト メニューを使用して Cookie テーブルで選択した行を削除します。

Chromium の問題: 333795265、553428200、514957134、555304817、555304814、562142155

ネットワーク: 早期ヒントのプリロード警告と永続的なオーバーライド

ネットワーク パネルで、早期ヒントの診断、ローカル オーバーライド、カスタム ヘッダー ワークフローが改善されました。

• キャッシュが無効になっている場合の早期ヒントのプリロードに関する警告: [キャッシュを無効にする] が有効になっているときに 103 Early Hints レスポンスにプリロード リンクが含まれている場合、[早期ヒント] ヘッダー セクションに警告が表示され、Chrome がこれらのプリロードを無視する理由が説明されます。
• 永続的なローカル オーバーライドとカスタム ヘッダー列: ページ ナビゲーション全体でローカル レスポンス本文のオーバーライドを提供し、リロード全体でカスタム リクエストとレスポンス ヘッダー列の構成と並べ替え順を保持し、コンテキスト メニューから切り捨てられた未加工のリクエスト ペイロードをコピーします。

Chromium の問題: 548701038、559925510、563542902、556269542、377410082

メモリ: ヒープ スナップショットでのデッド コンテキスト フィールドの検出

[メモリ] パネルで、V8 実行コンテキストに保持されている未使用のクロージャ変数が検出されるようになりました。DevTools は、ヒープ スナップショットに埋め込まれた V8 スコープ メタデータを解析して、クロージャを共有 Context オブジェクトに関連付けます。次に、アクティブなクロージャがアクセスしていないときに、兄弟の長時間クロージャによって保持されているデッド コンテキスト フィールドを、メモリへの影響で並べ替えてハイライト表示します。

Chromium の問題: 497855658

パフォーマンス: タイムライン ナビゲーションの改善とコールツリーの状態の保持

[パフォーマンス] パネルでは、フレーム チャートのナビゲーションの応答性が向上し、パネル間で分析コンテキストが保持されます。

• タイムライン ナビゲーションの改善: タイムライン ミニマップのズーム、パン、ドラッグが遅延なく行えるようになりました。
• コールツリーとボトムアップの状態を保持: [コールツリー] タブと [ボトムアップ] タブで、展開されたノード、選択、スクロール位置を失うことなく、DevTools パネルを切り替えることができます。

Chromium の問題: 553831653、561396590

その他のハイライト

Chrome 155 と Chrome 156 には、DevTools パネル全体で次の改善も含まれています。

• センサー: [センサー] パネルの新しい [CPU パフォーマンス階層] コントロールから navigator.cpuPerformance を直接オーバーライドするか、有効な CPU スロットリング プリセットを反映させます。（Chromium の問題: 449760252、526856234、526857820）
• デバイスモード: エミュレートされたデバイスごとにスケールとズームの自動調整の設定を保持し、デバイス ツールバーを切り替えるときに Save-Data のオーバーライドを保持します。（Chromium の問題: 561306841、555160483）
• カラー選択ツール: 暗い背景に明るいテキストを配置する場合の APCA コントラスト カラーの候補を表示し、色域外の色を NaN 値なしで oklab() と oklch() に変換します。（Chromium の問題: 560325669、558821258）
• ユーザー補助: 有効な正規表現フィルタの切り替えを色以外のインジケーター ドットで識別できるようになりました。また、[CSS の概要] でスクリーン リーダーがフォント プロパティ名を読み上げるようになりました。さらに、キーボード フォーカス リングとハイ コントラストの視認性が向上し、パネル間の移動が容易になりました。（Chromium の問題: 556764882、555848535、555599825、553804654）

Chromium の問題: 449760252、526856234、526857820、561306841、555160483、560325669、558821258、556764882、555848535、555599825、553804654