Chrome 136 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

新しいパフォーマンス分析情報

[パフォーマンス] > [分析情報] タブに新しい分析情報が表示されるようになりました。

  • 古い HTTP/1.1 プロトコルを使用するリクエストをハイライト表示する最新の HTTP。
  • 効率的なキャッシュ保存期間を使用する: キャッシュ保存期間を長くすることでメリットが得られるリクエストをハイライト表示し、ウェブサイトの読み込み時間を短縮します。
  • font-display を最適化した場合の推定節約時間を表示するフォントの表示。

[分析情報] タブに 3 つの新しい分析情報が表示されます。

クリックしてハイライト表示

[概要]、[ボトムアップ]、[コールツリー]、[イベントログ] の各テーブルで項目をクリックすると、パフォーマンス トレースを閲覧する際に、対応するイベントがトレース内でハイライト表示され、残りのイベントは暗く表示されるようになります。

ネットワーク リクエストの概要のサーバー タイミング

[パフォーマンス] パネルの [概要] タブに、サーバーサイド レンダリング技術を実装するネットワーク リクエストのサーバー タイミングが表示されるようになりました。

ネットワーク リクエストの概要の [Server timings] テーブル。

[パフォーマンス] パネルは、Server-Timing レスポンス ヘッダー ヘッダーからデータを取得します。

[プライバシーとセキュリティ] で Cookie をフィルタする

[プライバシーとセキュリティ] > [プライバシー] > [サードパーティ Cookie] セクションの表にフィルタが追加され、目的の Cookie をすばやく見つけられるようになりました。

[サードパーティ Cookie] テーブルのフィルタ。

パネル全体の表のサイズ（kB 単位）

同じコンテキスト内で単位を統一するため、[ネットワーク] パネルと [メモリ] パネルの表、および [パフォーマンス] > [概要] の [1p / 3p 表] で、すべてのサイズが kB で表示されるようになりました。これにより、MB、kB、B 単位を比較するのではなく、同じ列の数値やパネル間の数値を直接比較できます。

サイズ単位を統合する前後の状態。

[要素] > [スタイル] で corner-shape と corner-*-shape のオートコンプリートをサポート

[要素] > [スタイル] のオートコンプリートで、corner-shape プロパティと corner-*-shape プロパティに対応する値を提案できるようになりました。

corner-shape プロパティのオートコンプリート オプション。

Chromium の問題: 402346406。

試験運用版: DOM 内の要素と属性に関する問題をハイライト表示

この新しい試験運用版の機能により、[要素] パネルで DOM 要素または属性の問題が赤い波線でハイライト表示されるようになりました。このような要素や属性にカーソルを合わせると、[問題] パネルの対応するエラーへのリンクを含むツールチップが表示されます。

DOM ツリーで DOM の問題をハイライト表示する前後の様子。ツールチップと問題パネルへのリンクが表示されています。

[要素] パネルでは現在、<select> の無効な子孫、一致しない ARIA 定義、無効な ARIA 属性がハイライト表示されます。

Chromium の問題: 378738916。

Lighthouse 12.5.0

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

このバージョンで最も注目すべき点は、legacy-javascript が esmodules ではなく Baseline を使用するようになったことです。変更点の詳細なリストをご覧ください。

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

Chromium の問題: 40543651。

その他のハイライト

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

  • [パフォーマンス] > [分析情報] > [ネットワーク依存関係ツリー]: ネットワーク ツリー内のすべてのネットワーク リクエストの時間が表示されるようになりました（400708304）。
    • ネットワークの依存関係ツリー: ネットワーク ツリー内のすべてのネットワーク リクエストの時間が表示されるようになりました（400708304）。
  • アニメーション: キャプチャされたアニメーション 400635410 により、切り離された要素が [メモリ] パネルに表示されるバグを修正しました。
  • レコーダー: 録音を初めて実行する際に、コードを貼り付ける場合と同じ確認ダイアログを使用するようになりました。
  • レイヤ: 下部のステータスバーに、レイヤの合計数と、表示されているすべてのレイヤの合計メモリが表示されるようになりました。
  • メモリ: ヒープ スナップショットの初期化が、1 つのワーカーを使用する代わりに 2 つのワーカー間でタスクを並列化することで高速化されました（42203857）。
  • 問題: ローカル ネットワーク アクセス（LNA）の CORS エラーを報告するようになりました（395895368）。
  • ユーザー補助:
    • ツールチップ: フォーカスではなく、ホットキーを押したときに表示されるようになりました（396311936）。
    • [要素] > [スタイル]: var() 関数をキーボードで操作できるようになりました。つまり、--custom-property を選択して Enter キーを押すと、リンク先（401212692）に移動できます。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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