このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 128）

Sofia Emelianova

Gemini によるコンソールインサイトがヨーロッパのほとんどの国で公開されます

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

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

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

いずれかの国にお住まいの場合は、コンソールから直接 Gemini に分析情報の提供を依頼できるようになりました。これにより、エラーや警告について理解を深めることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

速度トラックの詳細

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

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

Chromium の問題: 345418915

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

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

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

名前付き HTML タグを使用し、ヒープスナップショットを高速化

[Memory] パネルのヒープスナップショットがさらに高速になり、名前付き HTML タグでオブジェクトをグループ化できるようになりました。また、表示される内部オブジェクトが少なくなるため、JavaScript 言語のセマンティクスに合わせて調整し、常に数値が含まれるようになりました。

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

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

スナップショットに内部オブジェクトを手動で追加するには、まず [設定] > [設定] >テスト >check_box ヒープスナップショットの内部関数を公開するオプションを表示してから、[Memory] パネルの check_box [Expose internals (...)] をオンにします。

Chromium の問題: 41490040、343341610、42203857。

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

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

パネルを開いたときにすでに進行中のアニメーションをキャプチャします。そのため、アニメーションをキャプチャするためにページを更新する必要はありません。
@keyframes のライブ編集がサポートされています。つまり、[Elements] の @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 expression] が明確に表示されるようになりました。

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

その他のハイライト

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

パフォーマンス: <ph type="x-smartling-placeholder">
- ネットワーク トラック: WebSocket 接続イベント 331351979 を追加しました。
- [Performance] パネルで、最もビジーなメインスレッドアクティビティ 345599356 が正しくズームインされるようになりました。
- 間違ったトレースファイル形式をアップロードするときのバグを修正しました。正しい .json または .gz 以外の種類のアップロードは行えません。349864878
要素 >スタイル: <ph type="x-smartling-placeholder">
- 長さプロパティ値の単位プルダウンは非推奨 41495618 になりました。
- ネストされた at-rules 346732737 のアクティブなプロパティの解決を修正しました。
- 非アクティブな @position-try セクションはグレー表示される 40246493 。
アプリケーション: <ph type="x-smartling-placeholder">
- Cookie: [更新] をクリックしても Cookie が更新されないバグを修正しました。348683488。
- ローカルストレージ: キーのアルファベット順（341129585）での並べ替えが可能になりました。

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

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

Chrome DevTools チームへのお問い合わせ

この投稿で紹介した新機能や変更点、またはその他の DevTools に関連する内容について話し合うには、以下のオプションを使用してください。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の問題を報告するには、その他のオプション（） >ヘルプ >DevTools で DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。