DevTools の新機能（Chrome 152）

Matthias Rohmer

公開日: 2026 年 8 月 25 日

Chrome 152 では、リクエストの再送信とバイナリ ペイロードの検査によるネットワーク デバッグの強化、Elements でのカスタム要素の装飾と CSS ネストの強化、Performance Live Metrics でのソフト ナビゲーションの Core Web Vitals、Console での構造化されたテーブルのエクスポート、DevTools MCP サーバーの改善など、ネットワーク デバッグが大幅に強化されています。

エージェント向け DevTools

Chrome DevTools MCP サーバーの最新の v1.7.0 リリースでは、Antigravity、Claude、Codex などのコーディング エージェント向けに、以前に導入されたメモリ デバッグ機能が拡張されています。

• ヒープ スナップショット オブジェクトの詳細（get_heapsnapshot_object_details）: ヒープ スナップショットから直接、JavaScript オブジェクトのプロパティ、クラス名、GC ルートの保持パスの詳細を調べます。
• ネイティブ V8 コンテキストのフィルタリング: ヒープ スナップショット オブジェクトをネイティブ実行コンテキストでフィルタし、スナップショットの概要でネイティブ コンテキストを検査します。
• デーモンの安定性とライフサイクルの改善: ナビゲーションごとのネットワーク リクエストの保持、セッション ID の検証、CLI とデーモンのバージョンの不一致に関する警告、コンテキストの破棄時のワーカーの正常なシャットダウンを追加しました。

詳細と使用を開始する方法については、GitHub のエージェント用 DevTools リポジトリをご覧ください。

ネットワーク: リクエストの編集と再送信、プリロードの分析情報、バイナリ ペイロードのデコード

• fetch リクエストと XHR リクエストの再送信: 以前の「XHR を再生」コンテキスト メニュー項目が「再送信」になりました。これにより、すべてのフェッチ可能なネットワーク リクエストがサポートされ、標準リクエストが fetch() 呼び出しに変換されるとともに、XHR とともに完全な再生の忠実度が維持されます。リクエストは、実行コンテキストとコンソール送信元も追跡して表示します。
• [プリロード済み] 列と [プリロード要素としてコピー]: 新しい専用の [プリロード済み] 列に、投機的プリロードを使用してネットワーク リクエストが開始されたかどうかが表示されます。リクエストを右クリックして [プリロード要素としてコピー] を選択すると、HTML にドロップできる <link rel="preload"> タグを生成することもできます。Early Hints は Initiator 列に分類されるようになりました。
• リクエスト ペイロードのバイナリ ビューア: [Payload] タブに、バイナリと圧縮されたリクエスト ペイロードのデコード方法オプション（Base64、Hex、UTF-8）が追加されました。これは [Response] タブと同じです。
• 固定されたリクエスト番号列: リクエスト # 列がネットワーク データグリッドの先頭に固定され、リクエストの参照が容易になりました。
• 同一サイトのホスト フィルタリング: ネットワーク フィルタバーでドメイン、ホスト名、ポート（localhost や example.com など）を検索すると、同一サイトのリクエストが正確にフィルタリングされるようになりました。
• デフォルトのクエリ パラメータのデコード: [ペイロード] タブのクエリ パラメータとフォーム パラメータが、すべてのリクエストで自動的にデコードされるようになりました。

Chromium の問題: 40726969、41299075、40138847、40222701、525848667、507077182、498482622、520437951、40267477

要素: カスタム要素のアドナー、ネストされた CSS 親セレクタのインタラクション、$0 疑似要素の選択

[要素] パネルで、ウェブ コンポーネントと最新の CSS の検証と作成がより迅速かつ直感的に行えるようになりました。

• カスタム要素のアドナー バッジ: カスタム HTML 要素（ハイフン付きタグまたはカスタマイズされた組み込み要素の is="..." 属性で識別）が、DOM ツリーのアウトラインに custom-element アドナー バッジを表示するようになりました。
• ネストされた CSS の親セレクタのインタラクションと詳細度: ネストされた CSS ルールと継承されたネストされたルールで親セレクタにカーソルを合わせると、ページ上の対応する要素がハイライト表示され、[スタイル] タブのフィルタリングに応答するようになりました。@nested-declarations ルールの特異性ツールチップ ポップオーバーを追加しました。
• $0 による疑似要素の選択: 要素の DOM ツリーで ::before や ::after などの疑似要素を選択すると、それらが $0 コンソール変数に直接バインドされ、JavaScript をすぐに検査できるようになりました。
• text-wrap 型と <image> 型の自動補完: [スタイル] ペインで、text-wrap（wrap、nowrap、balance、pretty、stable）のすべてのキーワード値が提案されるようになり、<image> データ型を受け入れる CSS プロパティが自動補完されるようになりました。
• ボックスモデルのスクロールバー認識: 要素に表示されるスクロールバーがある場合、ボックスモデルの指標図でコンテンツ ボックスの寸法が正確に計算され、レンダリングされるようになりました。

Chromium の問題: 367440148、 535517817、 535522242、 535523039、 537724428、 399305533、 334984154、 383355294、 326260752、 389342065

パフォーマンス: ライブ指標のソフト ナビゲーション指標とカスタム スクリーンショット プリセット

• ソフト ナビゲーションのライブ指標のサポート: ライブ指標ビューで、web-vitals v6.0.0 へのアップグレードにより、シングルページ アプリケーションのクライアントサイドのソフト ナビゲーションの Core Web Vitals（LCP や INP など）がデフォルトでキャプチャされ、レポートされるようになりました。
• カスタム スクリーンショット キャプチャ プリセット: パフォーマンス パネルの CDP トレース用に、構成可能なスクリーンショット フレーム サイズとカウント上限のプリセットが公開され、メモリ バジェット内でビジュアル録画の忠実度をカスタマイズできるようになりました。
• console.profileEnd() トレース表示ツール: コードまたはコンソールで console.profileEnd() を呼び出すと、記録されたトレースがパフォーマンス パネルで自動的に開いて表示されるようになりました。
• 拡張性 API のカスタム トラックの概要: パフォーマンス トレースの概要で、拡張性 API を使用して登録されたカスタム トラック グループが処理され、表示されるようになりました。

Chromium の問題: 514721939、490140054、536954453、535506117

コンソール: テーブルを Markdown または CSV としてエクスポートし、副作用を保護する

• コンソール テーブルを Markdown または CSV としてコピー: console.table() を使用して記録されたテーブルを、コンテキスト メニューから書式設定された Markdown テーブルまたは CSV データとしてクリップボードに直接コピーできるようになりました。
• 副作用評価の保護: デバッガのホバー評価で、new、タグ付きテンプレート リテラル、動的 import()、delete 演算子を含む式が保護されるようになりました。これにより、一時停止中に状態が誤って変更されるのを防ぐことができます。

Chromium の問題: 40924951、40133606

その他のハイライト

その他の DevTools サブシステムにおける主な改善点は次のとおりです。

• ソース: クイック オープンで、スコアのブーストが大きいローカル ワークスペース ファイルが優先されるようになり、ワークスペース ファイルがネットワーク リソースよりも上に表示されるようになりました。（Chromium の問題: 40260136）
• メモリ: Heap Snapshot Summary ビューに、選択したタイプの集計されたシャロー サイズとともにオブジェクトの合計数が表示されるようになりました。また、ネイティブ実行コンテキスト フィルタも含まれるようになりました。（Chromium の問題: 497855658）
• アプリケーション: [広告] パネルで、[広告をハイライト表示] 切り替えをパネルに直接移動し、クリック可能な広告 iframe 要素 ID を追加して階層内のフレームを表示し、フレームごとの指標の内訳表を導入しました。（Chromium の問題: 514957134）
• アプリケーション: [ストレージ] ペインの [サイトデータを削除] セクションを統合されたグループに再設計（Chromium の問題: 375867286）、バックフォワード キャッシュの復元後にキャッシュ ストレージ エントリが重複する問題を解決（Chromium の問題: 484693244）。
• 拡張機能: chrome.devtools.panels 全体の非同期メソッドが、コールバックなしで呼び出されたときに JavaScript Promise をネイティブに返すようになりました。（Chromium の問題: 496604551）
• 設定: デフォルトのネットワーク スロットリング プリセットとカスタム スロットリング構成を別々のセクションに分割。（Chromium の問題: 342409451）
• Lighthouse: バンドルされている Lighthouse モジュールをバージョン 13.4.1 に更新しました。（Chromium の問題: 40543651）
• 問題: loading="lazy" を使用する画像に width または height のディメンションが明示的に指定されていない場合、DevTools は警告を表示します。
• デバイスモード: ズームレベル メニューを簡素化し、[ウィンドウに合わせる] オプションを統合しました。また、フレーム グラフィックが利用できない場合は、[デバイス フレームを表示] 切り替えを無効にしました。

ユーザー補助機能の改善

Chrome 152 には、次のユーザー補助機能の強化が含まれています。

• [要素] と [ユーザー補助]: 要素の DOM ツリーとユーザー補助ツリービューをシームレスに切り替えるためのコンテキスト メニュー オプションと、ユーザー補助ノードの [ビューにスクロール] を追加しました。（Chromium の問題: 417929842）
• ユーザー補助: コンテキスト メニューを使用して、ユーザー補助機能ツリーのノードとサブツリーをプレーン テキストとしてコピーするサポートを追加しました。（Chromium の問題: 417929842）
• 要素: ダークモードで実行しているときに、[要素] パネルのコントラストが低い検索ハイライトの色を修正しました。（Chromium の問題: 491718898）
• ナビゲーション: DevTools を別のウィンドウにドッキング解除したり、タブに再ドッキングしたりしても、メインメニュー ボタンにフォーカスが強制的に移動しなくなりました。
• 設定: AI 設定の [詳細を表示] ボタンと [詳細を非表示] ボタンに、説明的なアクセシビリティ コンテキストを追加しました。