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 マーカーが表示されるようになりました。これにより、ページ全体を再読み込みせずにナビゲーションが行われる最新のウェブ アプリケーションのパフォーマンスをデバッグすることが大幅に容易になります。

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

パフォーマンス パネルのソフト ナビゲーション マーカー。youtube.com のトレースが表示されています。

Chromium の問題: 450673886450673887

行レベルのプロファイラ タイミングが大幅に正確になりました

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

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

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

トレース操作の高速化

[パフォーマンス] パネルの大きなボトルネックが解消されました。以前は、時間範囲を選択したり、ビジー状態のトレースをパンしたりすると、冗長なイベントの並べ替えにより 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 ファイルで、可逆的な整形切り替えがサポートされるようになり、元の書式設定を失うことなくデータを簡単に編集できるようになりました。
  • ネットワーク: コンテキスト メニュー項目が更新され、読みやすくなるように文頭大文字になりました。
  • コンソール: ページを再読み込みした後にキャッチされない例外のフィルタが失われる問題を修正しました。

Chromium の問題: 378870233461041921433162438

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

このバージョンでは、ユーザー補助機能が次のように改善されています。

  • 検索: スクリーン リーダーで Ctrl+F を使用すると、検索結果の数(例: 「5 件中 1 件」)が通知されるようになりました。
  • レコーダー: スクリーン リーダーで、録画が正常に削除またはインポートされたことが通知されるようになりました。
  • 設定: スクリーン リーダーで、[テスト] タブでフィルタリングしたときに結果の数が通知されるようになりました。
  • プライバシー: [プライバシー] パネルの [オリジン] グループにキーボードから完全にアクセスできるようになりました。
  • UI: ハイ コントラスト モードと強制カラー モードのユーザー向けに、ドックアイコンと無効な選択要素の視認性が向上しました。

Chromium の問題: 448675917392090449471713944471141907471095586