DevTools の新機能（Chrome 128）

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini によるコンソール分析情報がヨーロッパのほとんどの国で利用可能に

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

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

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

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

Gemini からのコンソール内のエラーに関する分析情報。

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

今回の更新では、[パフォーマンス] パネルが改善されています。

拡張ネットワーク トラック

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

ネットワーク トラックで、次の処理が行われるようになりました。

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

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

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

[ネットワーク パネルに表示] オプションを含むリクエストの右クリック メニュー。

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

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

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

[掲載結果] パネルのカスタム トラック。

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

タイミング トラックの詳細

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

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

Chromium の問題: 345418915

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

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

リストされたリクエストに対してのみオプションをコピーしてください。

名前付き HTML タグによる高速なヒープ スナップショット、不要な要素の削減

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

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

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

スナップショットに内部オブジェクトを手動で追加するには、まず [] の [設定] > [テスト] > [ヒープ スナップショットで内部オブジェクトを公開するオプションを表示] をオンにしてから、[メモリ] パネルの 内部公開（...）をオンにします。

Chromium の問題: 41490040、343341610、42203857。

[Animations] パネルを開き、アニメーションをキャプチャして @keyframes をライブで編集します

[アニメーション] パネルでは、次の処理が行われます。

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

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

Chromium の問題: 352718055

Lighthouse 12.1.0

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

今回の更新では、古い First Meaningful Paint（FMP）指標の削除と、Largest Contentful Paint（LCP）の導入など、いくつかの変更が加えられています。変更内容の一覧をご覧ください。

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

Chromium の問題: 772558。

ユーザー補助

このバージョンでは、ユーザー補助機能が次のように改善されています。

  • ライブ式の編集フィールドで自動補完後に Tab キーを押すと、フォーカスが次のフォーカス ポイントに移動します。以前は、テキストがインデントされていました。
  • サイズ変更ツールをクリックするとフォーカスが移動し、左右の矢印キーで移動できます。
  • スクリーン リーダーで [Sources] の [Add watch expression] 編集フィールドが通知されるようになりました。また、キーボードで操作するときに [Delete watch 式] がわかりやすく表示されるようになりました。

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

その他のハイライト

このリリースにおける注目すべき修正と改善は次のとおりです。

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。