DevTools の新機能（Chrome 128）

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini によるコンソールの分析情報がヨーロッパのほとんどの国でリリースされます

このバージョンでは、Gemini によるコンソール分析情報のサポートがヨーロッパのほとんどの国で利用できるようになりました。

新たにサポート対象となったヨーロッパの国の一覧

オーストリア、ベルギー、ブルガリア、スイス、キプロス、チェコ、ドイツ、デンマーク、エストニア、スペイン、フィンランド、フランス、英国、ギリシャ、クロアチア、ハンガリー、アイルランド、アイスランド、イタリア、リヒテンシュタイン、リトアニア、ルクセンブルク、ラトビア、マルタ、オランダ、ノルウェー、ポーランド、ポルトガル、ルーマニア、スウェーデン、スロベニア、スロバキア。

これらの国にお住まいの場合は、コンソールで Gemini に分析情報を直接リクエストして、エラーや警告をより深く理解できるようになりました。

コンソールに表示されたエラーに関する Gemini の分析情報。

[パフォーマンス] パネルの更新

このアップデートでは、[パフォーマンス] パネルにいくつかの改善が加えられています。

Enhanced Network トラック

[パフォーマンス] パネルの [ネットワーク] トラックが強化され、より詳細な所要時間やネットワーク イニシエータ ツリーなどの重要な情報が最初に表示されるようになりました。また、視覚的なキューと色もより明確に表示されるようになりました。そのため、[ネットワーク] パネルと [パフォーマンス] > [概要] タブを切り替える必要がなくなりました。また、[ネットワーク] パネルに切り替える必要がある場合も、より簡単かつ迅速に切り替えられるようになりました。

[ネットワーク] トラックで次の操作ができるようになりました。

  • リクエスト タイプのカラー凡例を表示します。
  • レンダリング ブロック リクエストを右上の赤い三角形でマークします。
  • 選択時にリクエストの開始元を矢印で示します。これにより、以前は [ネットワーク] パネルでしか確認できなかったネットワーク イニシエータのツリーを把握できます。
  • 再設計されたツールチップでは、レンダリング ブロックのステータスや優先度の変更など、構造化されたタイミング情報が表示されるようになりました。
  • [概要] タブの右側の列に、タイミングの内訳も表示されるようになりました。

[概要] タブに表示される、色分けされた凡例、ツールチップ、レンダリング ブロック インジケーター、タイミングを含む拡張ネットワーク トラック。

また、トラック内のリクエストまたは [概要] タブの URL を右クリックして、プルダウン メニューから [ネットワーク パネルで表示] を選択できるようになりました。DevTools の [ネットワーク] パネルに移動し、表で探しているリクエストがハイライト表示されます。

リクエストの右クリック メニューに [ネットワーク パネルで表示] オプションが表示されています。

拡張性 API を使用してパフォーマンス データをカスタマイズする

このバージョンでは、拡張機能のデータが [パフォーマンス] パネルでサポートされるようになりました。パフォーマンス トレースにイベントとツールチップの説明を含むカスタム トラックを追加したり、[概要] タブに詳細を追加したり、その他の操作を行ったりできるようになりました。この機能は、カスタム計測機能を含むフレームワーク、ライブラリ、複雑なアプリケーションのデベロッパーにとって便利です。

カスタム トラックの例については、こちらのデモページをご覧ください。[パフォーマンス] > [キャプチャ設定] で、[ 拡張機能データ] をオンにします。パフォーマンスの録画を開始し、デモページで [Add new Corgi] をクリックしてから、録画を停止します。トレースにカスタム トラックが表示され、[概要] タブにカスタム ツールチップと詳細を含むイベントが表示されます。

[パフォーマンス] パネルのカスタム トラック。

つまり、パフォーマンス データを拡張するには、performance.measure() または performance.mark() API 呼び出しの measureOption.detail パラメータまたは markOption.detail パラメータに特定の構造を渡します。

Timings トラックの詳細

Performance API の User Timing 部分を使用して Timings トラックにエントリを追加するウェブ デベロッパーは、mark イベントと measure イベントとそのタイムスタンプの [サマリー] タブで任意の詳細を確認できるようになりました。

タイムスタンプと詳細を含む Timings トラックのカスタム イベント。

Chromium の問題: 345418915。

ネットワーク パネルに表示されているすべてのリクエストをコピーする

[ネットワーク] パネルでは、ネットワーク ログ全体をコピーする代わりに、フィルタを適用して、リストに表示されたリクエストのみをコピーできるようになりました。

リストに記載されているリクエストに対してのみオプションをコピーします。

名前付き HTML タグとクラッターの削減による高速なヒープ スナップショット

[メモリ] パネルのヒープ スナップショットがさらに高速化され、名前付き HTML タグでグループ化されたオブジェクトが表示されるようになりました。また、内部オブジェクトの表示が減り、JavaScript 言語のセマンティクスとの一致が改善され、数値が常に含まれるようになりました。

名前付き HTML タグでグループ化されたオブジェクト。

[ キャプチャに数値を含める] 設定のパフォーマンスが向上し、デフォルトでオンになり、[メモリ] パネルから削除されました。

内部オブジェクトをスナップショットに手動で含めるには、まず 設定 > [試験運用版] > [ヒープ スナップショットで内部を公開するオプションを表示] をオンにしてから、[メモリ] パネルで [内部を公開 (...)] をオンにします。

Chromium の問題: 41490040、343341610、42203857。

アニメーション パネルを開いてアニメーションをキャプチャし、@keyframes をライブ編集する

[アニメーション] パネルで次の操作ができるようになりました。

  • パネルを開いたときにすでに進行中のアニメーションをキャプチャするため、アニメーションをキャプチャするためにページを更新する必要がありません。
  • @keyframes のライブ編集をサポートします。つまり、[要素] > [スタイル] で @keyframes セクションを編集すると、キャプチャしたアニメーションが更新されます。

次の動画で、両方の機能の動作を確認できます。

Chromium の問題: 352718055。

Lighthouse 12.1.0

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

このアップデートでは、Largest Contentful Paint（LCP）を優先して古い First Meaningful Paint（FMP）指標を削除するなど、さまざまな変更が加えられています。変更点の詳細なリストをご覧ください。

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

Chromium の問題: 772558。

ユーザー補助

このバージョンでは、アクセシビリティが次のように改善されています。

  • ライブ式の編集フィールドで自動補完後に Tab キーを押すと、フォーカスが次のフォーカス ポイントに移動します。以前は、テキストがインデントされていました。
  • リサイズ ハンドルをクリックすると、そのハンドルにフォーカスが移動し、左右の矢印キーで移動できるようになります。
  • スクリーン リーダーで [ウォッチ式の追加] 編集フィールドがアナウンスされるようになりました。また、キーボードで移動する際に [ウォッチ式の削除] が明確に表示されるようになりました。

Chromium の問題: 349939551、343942719、349334243、349428374。

その他のハイライト

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

  • パフォーマンス:
    • ネットワーク トラック: WebSocket 接続イベント 331351979 を追加しました。
    • [パフォーマンス] パネルで、最もビジーなメインスレッド アクティビティ 345599356 が正しくズームインされるようになりました。
    • 誤ったトレース ファイル形式をアップロードするバグを修正しました。正しい .json または .gz 以外の形式をアップロードできなくなりました。349864878
  • [要素] > [スタイル]:
    • 長さプロパティ値の単位プルダウンが非推奨になりました。41495618
    • ネストされた @ 規則の有効なプロパティの解決を修正しました。346732737
    • 無効な @position-try セクションがグレー表示されるようになりました 40246493。
  • アプリケーション:
    • Cookie: [更新] をクリックしても Cookie が更新されないバグを修正しました 348683488。
    • ローカル ストレージ: キーをアルファベット順に並べ替えられるようになりました。341129585

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

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

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

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

DevTools の新機能

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