DevTools の新機能(Chrome 145)

公開日: 2026 年 2 月 11 日

Chrome 139 と同様に、Chrome 145 では Chrome DevTools チームは、製品の卓越性を優先し、既知の問題の解決、UI 実装の統合、テストの健全性の改善に取り組みました。この取り組みを通じて、さまざまなパネルにわたる多数の微妙な修正と改善が実施され、日々のデバッグと開発のワークフローがよりスムーズで信頼性が高く、生産性の高いものになるはずです。

DevTools MCP サーバーの更新

DevTools MCP サーバーは、v0.11.0 から v0.14.0 に大幅に更新され、重要な自動化機能とエミュレーション機能が導入されました。

  • 自動接続: 新しい --auto-connect フラグにより、サーバーは実行中の Chrome インスタンスを自動的に検出して接続できるようになり、WebSocket URL を手動でコピーする必要がなくなります。
  • 統合されたエミュレーション: 1 つの emulate ツールで、位置情報、ネットワーク条件(オフライン/3G 低速)、CPU スロットリング、ユーザー エージェントのオーバーライドを処理できるようになりました。
  • ログの保持: ナビゲーションをまたいでネットワーク リクエストとコンソール メッセージにアクセスできるようになりました。これは、DevTools の [ログを保持] 機能と同じです。

変更点の完全なリストについては、GitHub の公開変更履歴をご覧ください。

トレースビューにソフト ナビゲーションが表示されるようになりました

ウェブサイトでシングルページ アプリケーション(SPA)アーキテクチャを使用している場合、ソフト ナビゲーションとソフト LCP マーカーが [パフォーマンス] パネルのトレースビューに表示されるようになりました。これにより、ページ全体の再読み込みなしでナビゲーションが行われる最新のウェブ アプリケーションで、パフォーマンスのデバッグが大幅に容易になります。

ソフト ナビゲーションの詳細については、こちらのブログ投稿をご覧ください。ライブ指標ビューとパフォーマンス分析にはソフト ナビゲーションは反映されませんが、この API の作業が継続されるため、今後のリリースで対応する予定です。

パフォーマンス パネルのソフト ナビゲーション マーカーと youtube.com のトレース。

Chromium の問題: 450673886450673887

行レベルのプロファイラ タイミングの精度が大幅に向上

[パフォーマンス] パネルでトレースを記録すると、[ソース] パネルに、トレースで観測されたタイミングが 1 行ごとに表示されます。これにより、実行時間が最も長いコード行を正確に特定できます。

この機能には、ソースが({} ボタンを使用して)整形されている場合や、ソースマップされたスクリプトを使用している場合に信頼性が低下するバグが以前に存在していました。これらの問題は解決され、行レベルのプロファイリングは正確になり、本番環境対応の最小化されたコードで使用できるようになりました。

[ソース] パネルの行番号の横にある実行タイミング。

トレース操作の高速化

[パフォーマンス] パネルの主なボトルネックが解決されました。以前は、期間を選択したり、ビジー状態のトレースをパンしたりすると、冗長なイベントの並べ替えにより UI の遅延が大きくなることがありました。これが最適化され、複雑なフレームグラフの操作が大幅に高速化されました。

Chromium の問題: 457866795

レンダリングを妨げるリソースを特定する

[ネットワーク] パネルに、専用の [レンダリング ブロック] 列が追加されました。これにより、ブラウザがページ コンテンツをペイントするのを妨げているリソース(JavaScript、CSS、フォント)をすぐに特定し、First Paint のパフォーマンスを最適化できます。

ネットワーク パネルの新しい [レンダリングをブロック] 列。

Chromium の問題: 41169154

個々のネットワーク リクエストのスロットリング

Chrome 144 で導入された [リクエストの条件] パネル(以前の [ネットワーク リクエストのブロック])で、個々のリクエストのスロットリングがデフォルトで有効になりました。

この機能は前のマイルストーンで導入されましたが、遅延回帰のため無効になりました。Chrome 145 では、特定のネットワーク リクエストを確実にスロットリングして、依存関係の遅延をシミュレートしたり、アプリが特定のリソースの遅延をどのように処理するかをテストしたりできるようになりました。

> [その他のツール] > [リクエスト条件] からパネルを開き、特定パターンのスロットリングまたはブロックを開始します。

@starting-style のデバッグの改善

CSS の @starting-style ルールのデバッグのサポートがデフォルトで有効になりました。この機能を使用すると、要素が最初にレンダリングされたときに適用されたスタイルを検査できます。これは、エントリ アニメーションとトランジションのデバッグに不可欠です。

Chromium の問題: 465367572

AI アシスタントの更新

  • マルチモーダル入力: クリップボードから AI アシスタンスのチャットに画像を直接貼り付けて、視覚的な問題について質問できるようになりました。

Chromium の問題: 470997699

その他のハイライト

  • 要素: ルート <html> タグの横に新しい [ソースを表示] バッジが追加され、ドキュメントのソースコードにすばやく移動できるようになりました。
  • ソース: 編集可能な JSON ファイルで、可逆的なプリティプリントの切り替えがサポートされるようになりました。これにより、元の形式を失うことなくデータを簡単に編集できます。
  • ネットワーク: コンテキスト メニューの項目が更新され、読みやすさを向上させるために文頭の 1 文字を大文字にするようになりました。
  • コンソール: ページを再読み込みするとキャッチされない例外のフィルタが失われる問題を修正しました。

Chromium の問題: 378870233461041921433162438

ユーザー補助に関するお知らせ

このバージョンでは、アクセシビリティが次のように改善されています。

  • 検索: スクリーン リーダーで検索結果の数(例:Ctrl+F を使用している場合。
  • レコーダー: 録音が正常に削除またはインポートされたときに、スクリーン リーダーがアナウンスするようになりました。
  • 設定: [テスト] タブでフィルタリングを行う際に、スクリーン リーダーで結果の数が読み上げられるようになりました。
  • プライバシー: [プライバシー] パネルの [オリジン] グループに、キーボードで完全にアクセスできるようになりました。
  • UI: ハイ コントラスト モードと強制カラー モードのユーザー向けに、ドックアイコンの視認性を改善し、選択できない要素を無効にしました。

Chromium の問題: 448675917392090449471713944471141907471095586