Chrome 136 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

[パフォーマンス] > [分析情報] タブに、新しい分析情報が追加されます。

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

[分析情報] タブに 3 つの新しい分析情報が追加されました。

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

[概要]、[ボトムアップ]、[呼び出しツリー]、[イベントログ] の各表でアイテムをクリックすると、パフォーマンス トレースを閲覧する際に、対応するイベントがハイライト表示され、残りのイベントが暗く表示されます。

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

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

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

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

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

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

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

パネル間の表のサイズ（KB 単位）

同じコンテキスト内で単位を同じにするため、[ネットワーク] パネルと [メモリ] パネルのテーブル、および [パフォーマンス] > [概要] の [ファーストパーティ / サードパーティ テーブル] で、すべてのサイズが 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 ではなく ベースラインを使用するようになったことです。変更点の詳細なリストをご覧ください。

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