DevTools の新機能（Chrome 128）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

DevTools の新機能

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