DevTools の新機能（Chrome 150）

Matthias Rohmer

公開日: 2026 年 6 月 30 日

Chrome 150 では、エージェント向けの DevTools のメモリ デバッグが改善され、AI アシスタンスがより多くのウィジェットで強化され、CSS の @container ルールと @function ルールの完全な編集機能が導入されます。

エージェント向け DevTools

最近のリリース（v1.4.0 まで）では、エージェント向け Chrome DevTools のエージェント ブラウザの自動化とデバッグ機能が大幅に拡張されています。

前回のリリース以降の主な機能と改善点は次のとおりです。

  • メモリ デバッグ スイート（--experimentalMemory）: エージェントが V8 ヒープ スナップショットを直接キャプチャして分析し、JavaScript のメモリリークを診断してオブジェクト保持階層を分析できるようになりました。
  • Chrome 拡張機能の管理（--categoryExtensions）: エージェントは、拡張機能のライフサイクル（インストール、アンインストール、再読み込み、リスト）を管理し、診断用のバックグラウンド サービス ワーカー コンソールログをキャプチャできます。
  • バンドルされたエージェント スキル: skills/ ディレクトリが npm パッケージ配信で直接公開されるようになり、MCP クライアント エージェントが特殊なブラウジングとデバッグのワークフローを自動的に検出して実行できるようになりました。
  • トークンと出力の最適化: スクリーンショットのサイズをソースで制限することで、トークンの消費量を削減します。また、試験運用中の TOON（Token-Oriented Object Notation）のサポートにより、構造化データの形式が最適化されます。
  • ナビゲーションとコンテキストの強化: list_pages に URL とターゲット ID に加えてページタイトルが含まれるようになり、マルチタブのコンテキスト選択が改善されました。また、allowedUrlPattern と blockedUrlPattern の構成オプションにより、ブラウジング範囲のセキュリティが厳格に適用されます。

エージェント向け DevTools に関する最新の更新情報と投稿については、GitHub リポジトリをご覧ください。

AI アシスタントによる詳細な分析情報

AI アシスタンス エージェントのチュートリアルに新しい Lighthouse ウィジェットと計算済みスタイル ウィジェットが追加されました。

AI アシスタント パネルは進化を続け、エージェントのガイドでより詳細な情報を提供します。9 個のウィジェットが追加され、Lighthouse、[ネットワーク]、[ソース]、[パフォーマンス] パネルのデータが表示されるようになりました。ウィジェットを使用すると、Gemini がエージェント ツールを呼び出してパフォーマンス イベント、リソース コンテンツ、ネットワーク リクエストなどを取得する際に使用するデータをより深く理解できます。

Chromium の問題: 460763995

より多くの CSS @ 規則の編集を完全にサポート

[要素] パネルの [スタイル] タブに、最新の CSS 機能の新しいオーサリング機能が追加されました。

  • インプレース @container ルールの編集: CSS @container ルールでコンテナ名とクエリ条件を直接編集できるようになりました。これにより、レスポンシブ コンテナ クエリのデザインをシームレスにテストできます。
  • CSS @function ルールの編集: カスタム CSS @function ルールの編集が完全にサポートされるようになりました。
  • @counter-style ルールの編集: list-style-type プロパティのコード補完を追加し、対応する @counter-style 定義に直接リンクしました。
  • 適用されないルールを折りたたむ: 新しい設定により、適用されない CSS スタイルルールを折りたたんで、[スタイル] ペインをアクティブなスタイルのみに絞り込むことができます。

[スタイル] タブの CSS 関数と counter-style ルール。

Chromium の問題: 507611251、41491726、480080406、351662727、514846131

[ソース] で重複除去されたブレークポイントと再帰的なソースマップのサポート

[ソース] パネルでは、複雑な最新のビルド パイプライン全体でデバッグの精度が向上しています。

  • 論理ブレークポイントの重複除去: ガターのブレークポイント マーカーが、最も近い解決済みロケーション マッピングを使用して、コード分割バンドルと SSR/クライアント コンパイル テンプレート間で重複除去されるようになりました。これにより、複数のチャンクまたは環境で共有されるコードをデバッグする際に、ブレークポイント インジケーターが重複して表示されるのを防ぐことができます。
  • 再帰的な EvalOrigin とネストされたソースマップ: デバッガが、ソースマップ間の再帰的な EvalOrigin 構造とネストされた変換チェーンをサポートするようになりました。これにより、マルチステージ コンパイル ワークフローで正確なスタック トレースとステップ実行の動作が保証されます。
  • 行に移動するキーボード ショートカット: エディタで「行に移動」ナビゲーションを行うための追加のキーボード ショートカットとして ALT + G を追加しました。これは、Chrome の新しい Gemini のショートカットとの競合を避けるためです。
  • 属性のインポートの書式設定: 基盤となる Acorn パーサーを更新し、標準の JavaScript インポート属性構文のプリティプリント形式をサポートしました。

Chromium の問題: 493674242、485142682、480172712、491167992

DevTools 全体でのセキュリティとクロスオリジンの強化

他の多くのソフトウェア プロダクトと同様に、最近セキュリティ レポートが急増しており、その多くは AI の助けを借りて発見されたものです。DevTools の安全性を維持するため、チームはこれらの問題を常に確認し、修正しています。

  • ライブ式に対する自己 XSS 保護: コンソールでライブ式を作成する際に、自己 XSS 警告ダイアログと保護メカニズムを追加しました。
  • レコーダーのナビゲーション許可リストと再生の検証: レコーダー パネルで、厳格なナビゲーション許可リストが適用され、特権ページのナビゲーションが防止されるようになりました。また、再生セクション内で厳格な拡張機能オリジンの検証も行われます。
  • 拡張機能のネットワーク オーバーライドの制限: 拡張機能で管理されるネットワーク オーバーライドで、runtime_blocked_hosts ホストポリシーが厳格に適用されるようになりました。
  • 安全な @font-face 構築: CSSStyleSheet API と安全な URL 文字列化を使用して @font-face ルール生成をリファクタリングし、データ URL を介した CSS インジェクションを防ぎます。

その他のハイライト

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

  • パフォーマンス: キャッシュに保存されたネットワーク リクエストの TraceTree 転送サイズが膨張する問題を修正しました。特定されたキャッシュ ヒットで転送サイズを 0 バイトに強制することで、この問題を解決しています。
  • パフォーマンス: オプションの Chrome UX レポート（CrUX）deviceScope フィールド データをサポートするように、パフォーマンス フォーマッタを更新しました。
  • パフォーマンス: 長いファイル URL が省略記号で切り捨てられないように、コールツリー テーブルで水平スクロールを有効にしました。
  • パフォーマンス: 複数のトレース ファイルにわたる Insights サイドバーで、再レンダリングの破損と DOM 状態の破損を修正しました。
  • パフォーマンス: タイムラインの無効化のトラッキングとデバッグモードの設定を試験運用版フラグから標準の DevTools 設定に移行しました。
  • ネットワーク: 間違った列名の変更を元に戻して、Has overrides 列を復元し、ヘッダーとコンテンツのオーバーライドの並べ替えロジックを修正しました。
  • ネットワーク: Server-Timing ウォーターフォール バーの CSS attr() スタイルを修正し、行ごとに生成された色が正しくレンダリングされるようにしました。
  • ネットワーク: 名前なしの Cookie の cURL としてコピー コマンドの生成を修正しました。
  • アプリケーション: 新しい StorageAgent インフラストラクチャを使用して、[アプリケーション] パネルでローカル ストレージとセッション ストレージの項目を接続しました。
  • アプリケーション: 投機的読み込みのステータスの優先順位を修正し、プリフェッチとプリレンダリングの両方に成功した URL が「プリレンダリング済み」として正確に表示されるようにしました。
  • アプリケーション: Heap スナップショット ビューの列全体で、バイト単位で正確な値のツールチップが表示されるようになりました。
  • 問題: 戻るナビゲーションで広告エントリがスキップされるたびに、BackUINavigationWouldSkipAd の問題タイプが表示されるようになりました。
  • 問題: メール確認リクエストの問題（EmailVerificationRequestIssue）を表面化するためのサポートを追加しました。
  • Lighthouse: Lighthouse 構成パネルに [エージェント ブラウジング] カテゴリのチェックボックスを追加（デフォルトでは無効）し、バンドルされている Lighthouse エンジンを v13.3.0 に更新しました。

Chromium の問題: 518021339、40908621、517519019、487755345、505284391、465915378、512908993、40543651

ユーザー補助機能の改善

Chrome 150 では、DevTools 全体でスクリーン リーダーのアナウンス、ウィジェット構造、ARIA セマンティクスが大幅に改善されています。

  • [スタイル] タブ内のタブの選択とセクションの移動に関するスクリーン リーダーの読み上げを改善しました。
  • ダイアログの閉じるアイコンに説明的なツールチップを追加し、ツールチップで ARIA の詳細と説明の属性を使用できるようにしました。
  • コンテキスト メニュー アイテムに厳格な ARIA menuitem ロールを適用し、支援技術のナビゲーションを改善しました。

Chromium の問題: 510013788