DevTools の新機能（Chrome 128）

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

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

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

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

この更新により、[パフォーマンス] パネルが改善されました。

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

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

ネットワーク トラックは次のように動作します。

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

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

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

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

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

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

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

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

Chromium の問題: 345418915。

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

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

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

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

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

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

Chromium の問題: 41490040、343341610、42203857。

アニメーション パネルを開いてアニメーションをキャプチャし、@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 キーを押すと、フォーカスが次のフォーカス ポイントに移動します。以前は、テキストがインデントされていました。
• サイズ変更ツールをクリックすると、ツールにフォーカスが当てられるため、左右の矢印キーで移動できます。
• スクリーン リーダーが [ソース] の [ウォッチ式を追加] 編集フィールドを読み上げるようになりました。また、キーボードで移動する際に [ウォッチ式を削除] がはっきりと表示されるようになりました。

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 の新機能、アップデート、その他のトピックについて話し合います。

• フィードバックや機能リクエストは crbug.com から送信してください。
• DevTools で more_vert [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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