Chrome 135 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

[概要] タブにソースとオリジンを追加する前後の状態。

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

Chromium の問題: 368541957。

「フェーズ別の LCP」フィールド データのサポート

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

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

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

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

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

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

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

[要素] のユーザー補助ツリービュー

[要素] パネルで、アクセシビリティ ツリーの全ページ表示がデフォルトでオンになりました。

以前は、[要素] > [ユーザー補助] タブで、別のユーザー補助ツリーを閲覧できました。要素パネルの DOM ツリーの右上にある [アクセシビリティ ツリービューに切り替え] ボタンをクリックすると、DOM ツリーとページ全体のアクセシビリティ ツリーを切り替えて、それらの関係を簡単に確認できるようになりました。

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

アクセシビリティ ツリーを使用すると、支援技術がコンテンツをどのように認識しているかを確認できます。また、DOM ノードの ARIA 属性と計算されたアクセシビリティ プロパティも表示されます。詳しくは、Chrome DevTools の完全なアクセシビリティ ツリーをご覧ください。

Chromium の問題: 40808541。

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

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

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

[AI に質問] オプションがメニューの下部に移動

[AI に質問] オプションが、プルダウン メニューの上部ではなく下部に表示されるようになりました。

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

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

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 の新機能シリーズで取り上げられたすべての内容の一覧。