DevTools の新機能 - 2026 年 10 月

公開日: 2026 年 10 月 1 日

Chrome 153 と Chrome 154 が先月 Stable にロールアウトされ、日常のワークフローに役立つデベロッパー向けの改善が多数提供されました。このエディションでは、エージェントの DevTools でのきめ細かい JavaScript 実行制御、[Application] パネルでの広告スクリプトのトラッキング、完全なソフト ナビゲーションのサポートと [Performance] での CPU パフォーマンス ティアのオーバーライド、[Elements] での非アクティブなスタイルとキーボードでアクセス可能な装飾のサポート、AI アシスタンスでのソース検査とパフォーマンス トレースの記録、[Device Mode] でのデバイス プリセットの最新化がハイライトされています。

エージェント向け DevTools

Chrome DevTools MCP サーバーには、コーディング エージェント向けの新しいセキュリティ制御、パフォーマンス チューニング、メモリ分析機能が導入されています。

  • Agent Plugins 1.0 パッケージ: Agent Plugins 1.0 パッケージのサポートを追加しました。これにより、エージェントはモジュラー プラグイン拡張機能を読み込んで実行できます。
  • JavaScript 実行の制御: --no-javascript-evaluation を構成するか、JavaScript 実行ツールをオフにして、スクリプトを評価せずにページを検査します。これは、ナビゲーションと初期化スクリプトにまで及びます。
  • オンデマンドのソースマップ: ソースマップを無効にするオプションと、オンデマンドでソースマップを遅延読み込みするオプションを追加しました。これにより、大規模なサイトでのメモリ使用量の増加を防ぐことができます。
  • 構成可能なファイル システム ルートと CLI パスの権限: CLI に --allow-unrestricted-paths がデフォルトで含まれるようになり、構成可能なファイル システム ルートがサポートされるようになりました。
  • ヒープ スナップショットの検査: query_heapsnapshot を使用して保持サイズまたはプロパティ名でオブジェクトを直接クエリし、エッジの自己サイズと保持サイズを表示して、V8 実行コンテキストによって保持されているメモリを検査します。
  • PWA 自動化ツール: プログレッシブ ウェブアプリのインストールとライフサイクル チェックを自動化するための専用ツールを追加しました。
  • コンソール スタック トレース: list_console_messages でコンソール メッセージを一覧表示するときに、オプションのスタック トレースを取得します。

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

Chrome ユーザー エクスペリエンス レポート(CrUX)に 4 つの試験運用版広告指標が導入されたことに伴い、この新しいサブパネルは、ページ全体の広告関連情報をデバッグして最適化するための一元的な場所となります。これには以下が該当します。

  • 新しい試験運用版の指標(ビューポートの広告密度、ビューポートの広告数、広告による CPU 使用量の合計、広告によるネットワーク使用量の合計)のダッシュボード。
  • 広告要素別の CPU 使用率とネットワーク使用率のセグメンテーション
  • メインフレームの広告スクリプトの表。
  • ページ上の広告をハイライト表示する切り替えボタン。

新しい広告指標について詳しくは、ドキュメントをご覧ください。

[アプリケーション] パネルの [広告] タブに新しい [広告スクリプト] テーブルが表示され、[ソース] に広告スクリプトが表示されている。 [アプリケーション] パネルの [広告] タブに新しい広告スクリプト テーブルが表示され、[ソース] に広告スクリプトが表示されている様子。

Chromium の問題: 514957134512927903540469610

[パフォーマンス] パネルでは、エンドツーエンドのソフト ナビゲーション測定、ハードウェア キャリブレーションのオーバーライド、より詳細なトレース検索が可能です。

  • ソフト ナビゲーションの完全なサポート: Chrome 152 のライブ指標とトレースビューでソフト ナビゲーションのサポートが導入されたのに続き、分析情報でソフト ナビゲーションの分析が利用できるようになりました。これにより、パフォーマンス パネルでソフト ナビゲーションを測定するためのエンドツーエンドのサポートが完了しました。
  • CDP を介した CPU パフォーマンス ティアのオーバーライド: DevTools で、Chrome DevTools Protocol(Emulation.setCPUPerformanceOverride)を介して調整された CPU パフォーマンス ティアのオーバーライドを構成、計算、ディスパッチできるようになりました。これにより、ハードウェア ティア間で再現可能なパフォーマンス テストが可能になります。
  • フレームグラフでの拡張機能トラックの検索: [パフォーマンス] パネルのフレームグラフで Ctrl+F を押すと、拡張機能 API を使用して登録されたカスタム トラックのエントリが照合され、ツールチップ テキスト、プロパティ、ユーザーの詳細が検索されるようになりました。
  • CPU プロファイル スレッドの可視化: パフォーマンス パネルのフレーム チャートで、CPU プロファイル サンプルのみを含むスレッドがレンダリングされるようになり、WebAssembly スレッドなどのバックグラウンド実行がタイムライン ビューに表示されるようになりました。
[パフォーマンス] パネルのソフト ナビゲーションのエンドツーエンドのワークフロー。

Chromium の問題: 449760252483092899540020488

要素: 非アクティブなスタイル、キーボードでアクセス可能な装飾、ツリー アウトラインの修正

[要素] パネルで CSS の検証と作成がより高速かつ簡単になりました。

  • 非アクティブなスタイルのサポート: 選択した要素に以前は一致していたスタイルルールが、一致しなくなった場合でも、DevTools で引き続き表示されるようになりました。非アクティブな視覚的インジケーターで明確に区別されます。非アクティブなスタイルを有効にして、[設定] で折りたたみ動作を構成します。
  • キーボードでアクセス可能な装飾: DOM ツリー内のインタラクティブな装飾([ソースを表示]、[開始スタイル]、[スクロール スナップ]、[表示] など)がキーボードでフォーカス可能になり、Enter または Space を使用してアクティブにできるようになりました。
  • ドラッグ&ドロップによる並べ替え: DOM ツリー内の要素をドラッグして DOM ノードを並べ替える機能が、シャドー DOM の境界を越えて確実に動作するようになり、ドロップ位置のインジケーターも明確になりました。
  • CSS プロパティの切り替えがスムーズに: [スタイル] タブで CSS プロパティのチェックボックスを切り替えても、UI の再描画や視覚的な点滅が重複して発生しなくなりました。
無効な CSS ルールが表示されている要素パネル。
無効な CSS ルールが表示されている [要素] パネル。

Chromium の問題: 539424116554057179555088527548477554

Device Mode: フォーム ファクタ別にグループ化された最新のデバイス プリセット

[Device Mode] ツールバーと [設定] > [デバイス] ビューでは、エミュレートされたハードウェアが明確なカテゴリに分類されます。

  • フォーム ファクタのグループ化: エミュレートされたデバイスが、[モバイル]、[折りたたみ式]、[タブレットとパソコン]、[スマートディスプレイ] にグループ化されるようになりました。
  • ハードウェア カタログを更新: iPhone 16、Google Pixel 9、Google Pixel 10、Galaxy Z Fold 6、iPad Pro 13 インチ、Google Nest Hub Max などの最新のプリセットを追加し、古いデバイス定義を廃止しました。
Device Mode。フォーム ファクタ別にグループ化された最新のデバイス プリセットが表示されています。
フォーム ファクタごとにグループ化された最新のデバイス プリセットを表示する Device Mode。

Chromium の問題: 526856234526857820

ネットワーク: コンソールでフェッチとして編集して再送信、ローカル オーバーライドのセキュリティ

ネットワーク リクエストの検査とデバッグのワークフローが効率化され、安全になりました。

  • コンソールで取得として編集して再送信: ネットワーク リクエストで [コンソールで取得として編集して再送信] を選択すると、コンソール パネルが自動的にフォーカスされ、fetch() 式がプロンプトに貼り付けられます。パラメータのコメントと元のリクエストへの参照リンクも含まれます。
  • ローカル オーバーライドのセキュリティ強化: [ネットワーク] パネルで、ローカル オーバーライドでのパス トラバーサル(%2E%2E)が防止され、data:blob:javascript:about: などの http(s) 以外のスキームでのオーバーライドの作成が禁止されるようになりました。
  • Copy as curl (cmd) でのキャレットのエスケープ: Windows cmd.exe の curl コマンドとしてネットワーク リクエストをコピーする際に、かっことバッククォートがキャレットでエスケープされるようになり、別のシェルに貼り付けたときにコマンド構文エラーが発生しなくなりました。
  • バイナリ ペイロード カーソルの同期: [ペイロード] タブでは、16 進数、Base64、UTF-8 の各ビューを切り替える際に、スクロールとカーソルの位置が維持されます。
ネットワーク リクエストを右クリックして [編集してフェッチとして再送信] を選択すると、フェッチ式がすでに貼り付けられて編集可能な状態になっている [コンソール] パネルに自動的にフォーカスが移動します。
ネットワーク リクエストを右クリックして [Edit and resend as fetch] を選択すると、フェッチ式がすでに貼り付けられて編集可能な状態になっているコンソール パネルに自動的にフォーカスが移動します。

Chromium の問題: 40726969513843792513836026407750982

メモリ: ヒープ スナップショットのエッジ フィルタリング、サイズの並べ替え、オブジェクトのクエリ

[メモリ] パネルには、ヒープ スナップショットを分析するためのより詳細なツールが用意されています。

  • エッジの並べ替えとフィルタリング: ヒープ スナップショット内のエッジを最小保持サイズでフィルタし、プリミティブ値(nullundefinedtruefalse)をフィルタして、意味のあるオブジェクト参照に焦点を当てることができるようになりました。エッジは、保持サイズ、自己サイズ、名前で並べ替えることができます。
  • オブジェクトの直接クエリ: DevTools は、保持サイズしきい値またはプロパティ名でヒープ スナップショット オブジェクトを直接クエリすることをサポートしており、メモリリークの調査を効率化します。
  • コンテキスト保持分析: ヒープ スナップショットは、V8 実行コンテキストによって保持されているメモリの合計を計算してレポートできます。
  • 復元力のあるスナップショット解析: 無効または破損したヒープ スナップショット ファイルで、解析がハングアップするのではなく、明確なエラーが表示されるようになりました。

Chromium の問題: 497855658

ユーザー補助機能の改善

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

  • 要素: macOS の VoiceOver で、DOM ツリー アイテムのナビゲーション時に、丁寧なライブ リージョンを通じて「展開」と「折りたたみ」の状態変化がアナウンスされるようになりました。(Chromium の問題: 540028208
  • 問題: [問題] カウンタで重複するスクリーン リーダーのアナウンスを解決し、単一のわかりやすい概要を読み取り、[問題] パネル内でボタン以外の正しいセマンティクスを適用しました。(Chromium の問題: 536977880
  • 要素: インタラクティブな装飾(ソースを表示開始スタイルスクロール スナップ表示)は、キーボードを使用して完全にフォーカス可能で、アクティブ化できます。(Chromium の問題: 554057179
  • ライブ リージョン: ライブ アナウンスと ariaNotify 呼び出しを記録してデバッグするための AccessibilityAnnouncementRecordingView を追加しました。(Chromium の問題: 527462118

Chromium の問題: 540028208536977880554057179527462118