Chrome 135 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

パフォーマンス パネルの改善

このバージョンでは、[パフォーマンス] パネルが大幅に改善されています。

パフォーマンスのプロファイル呼び出しと関数呼び出しのオリジンとスクリプト リンク

[パフォーマンス] > [概要] タブに、プロファイル呼び出しと関数呼び出しの関連するスクリプトとオリジンへのリンクが表示されるようになりました。これにより、[メイン] トラックでこれらのイベントにカーソルを合わせる必要がなくなりました。

[概要] タブにソースと送信元を追加する前と後。

また、[ネットワーク] トラックと [メイン] トラックでは、イベントにカーソルを合わせると、サードパーティ名（ある場合）がツールチップに表示されるようになります。

Chromium の問題: 368541957。

「LCP by phase」フィールドのデータのサポート

フィールドデータを有効にすると、[パフォーマンス] > [分析情報] > [LCP のフェーズ別] の分析情報に、Chrome UX レポートの75 パーセンタイル画像タイミングが追加の表で表示されるようになりました。これにより、分析情報内でタイミングを比較できます。

フィールドデータのサポートを「フェーズ別の LCP」分析情報に追加する前と後。

「ネットワークの依存関係ツリー」分析情報

[パフォーマンス] > [分析情報] タブに、新しい [ネットワーク依存関係ツリー] 分析情報がコレクションに追加されます。この分析情報は、重要なリクエストが連鎖されているかどうかを示します。これは推奨されません。分析情報に表示されているリクエストにカーソルを合わせると、[ネットワーク] トラックでハイライト表示されます。

詳細については、重要なリクエストのチェーンを回避するをご覧ください。

最も時間がかかったスタックのハイライト表示

[パフォーマンス] パネルで、[呼び出しツリー] または [ボトムアップ] > [最も負荷の高いスタック] サイドバーでアイテムにカーソルを合わせると、[メイン] トラックのアイテムがハイライト表示され、残りのアイテムは暗くなります。これにより、最も時間のかかるコールスタック内のネストされたアイテムを視覚的に見つけることができます。

Elements のユーザー補助ツリービュー

[要素] パネルで、アクセシビリティ ツリーの全ページ表示がデフォルトでオンになりました。支援技術がコンテンツをどのように認識しているかを検査し、ARIA 属性と DOM ノードの計算されたユーザー補助プロパティを確認できます。

ユーザー補助ツリービューを開くには、[要素] パネルの DOM ツリーの右上にある [ユーザー補助ツリービューに切り替え] ボタンをクリックします。

デフォルトでアクセシビリティ ツリーの全ページ表示をオンにした前後の様子。

詳しくは、Chrome DevTools の完全なユーザー補助ツリーをご覧ください。

Chromium の問題: 40808541。

さまざまなパネルの空の状態を改善しました

さまざまなパネル、セクション、タブの空の状態（何も開いていない状態）が合理化され、作業を開始するために必要な操作を正確に把握できるようになりました。ネットワーク パネルなど、空の状態の一部に、ページを再読み込みなど、関連する便利なボタンが表示されるようになりました。

ネットワーク パネルと検索パネルの空の状態の改善前と改善後。

[AI に質問] オプションをメニューの一番下に移動しました

[AI に質問] オプションが、プルダウン メニューの上部ではなく下部に移動しました。

[AI に質問] オプションをプルダウン メニューの一番下に移動する前と後。

AI アシスタント パネルに関するフィードバックは、crbug.com/364805393 からお送りください。

Lighthouse 12.4.0

[Lighthouse] パネルで Lighthouse 12.4.0 が実行されるようになりました。

このバージョンでは、一部のパフォーマンス監査が、合格条件の下で有益なものとしてマークされ、合格した監査セクションに表示されなくなります。変更点の詳細なリストをご覧ください。

DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 40543651。

その他のハイライト

このリリースの主な修正と改善点は次のとおりです。

  • [パフォーマンス] > [概要]: 2 つの行の [合計時間] と [自己時間] を、1 行の [所要時間] に置き換え、括弧内に (self time) も表示するようにしました（crbug.com/395572753）。
  • 問題: 新しい問題タイプを追加しました。ユーザー補助ツリー内の <select> の問題と、ネットワーク サービスでの解析または検証中に発生する SRI メッセージ署名エラー（crbug.com/381044049、crbug.com/347890366）。
  • ユーザー補助: [要素] > [スタイル] タブで、キーボード ナビゲーションを使用して移動する要素の輪郭が表示されるようになりました（crbug.com/396311936）。
  • 要素: <select> に関する問題がサポートされ、波線の下線でハイライト表示されるようになりました（crbug.com/378738916）。
  • ネットワーク: 「オーバーライド ドット」と Cookie の警告アイコンが、左ではなくタブ名の右側に表示されるようになりました（crbug.com/390556283）。

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta のいずれかを使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも先にサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。