DevTools の新機能（Chrome 129）

Sofia Emelianova
Sofia Emelianova
GitHub

レコーダーが Firefox 用 Puppeteer へのエクスポートをサポート

WebDriver BiDi のサポートの一環として、[Recorder] パネルで Firefox 用 Puppeteer に録音をエクスポートできるようになりました。Puppeteer が Firefox をサポートしたことで、Chrome DevTools の [レコーダー] パネルを使用してユーザーフローを記録し、エクスポートして Firefox と Chrome の両方で実行できるようになりました。

レコーダーのエクスポート メニューに [Puppeteer for Firefox] オプションを追加する前と後。

詳細については、WebDriver BiDi - The future of cross-browser automation をご覧ください。

[パフォーマンス] パネルの改善

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

ライブ指標の観測

[パフォーマンス] パネルに、ローカルマシンと Chrome UX レポートのフィールド データに基づく Core Web Vitals に関するリアルタイムの観測結果が表示されるようになりました。これにより、パフォーマンス トレースをキャプチャしなくてもパフォーマンスの問題を特定し、ユーザーのパフォーマンスと比較して自分のパフォーマンスがどの程度代表的であるかを把握できます。

LCP と CLS のライブ観測結果を表示するには、[パフォーマンス] パネルを開きます。INP を表示するには、ページ上でインタラクションを行います。ローカル指標を Chrome UX レポートの集計ユーザー エクスペリエンスと比較するには、フィールド データを追加します。右側の [フィールド データ] セクションで [設定] をクリックし、ダイアログ ウィンドウで [OK] をクリックします。指標の値にカーソルを合わせると、ツールチップに詳細情報が表示されます。

[掲載結果] パネルの指標に関するライブ モニタリング。

[パフォーマンス] パネルには、改善が必要な指標がハイライト表示され、ローカル エクスペリエンスをユーザー エクスペリエンスに合わせる方法に関する分析情報と推奨事項が表示されます。たとえば、CPU やネットワークをスロットリングする場合は、同じ画面の右側にある [録画設定] セクションで設定できます。

[パフォーマンス] パネルの [検索] ボックスが [ネットワーク] トラックでも機能するようになり、Ctrl / Cmd+F ショートカットでリクエストを検索できるようになりました。

検索で見つかったネットワーク リクエスト。

performance.mark 呼び出しと performance.measure 呼び出しのスタック トレースを確認する

[サマリー] タブの [パフォーマンス] パネルに、performance.mark 呼び出しと performance.measure 呼び出しのスタック トレースが表示されるようになりました。これらの呼び出しを使用して、パフォーマンス トレースにカスタムデータを追加できます。

performance.mark 呼び出しと performance.measure 呼び出しのスタック トレースを表示する前と後の画像。

詳細については、拡張機能 API を使用してパフォーマンス データをカスタマイズするをご覧ください。

自動入力パネルでテストの住所データを使用する

[自動入力] パネルに、住所フォームのテストデータが表示されるようになりました。これにより、Chrome に住所が保存されていない場合やゲスト プロフィールを使用している場合に、ウェブサイトの住所フォームを簡単にテストできます。

住所フォームにテストデータを自動入力するには、[自動入力] パネルを開いて [自動入力メニューにテスト用の住所を表示する] をオンにし、ページ上の住所フォームを右クリックして、[デベロッパー ツール] メニューからオプションのいずれかを選択します。

住所フォーム フィールドのプルダウン メニューに自動入力のテストデータ オプションを追加する前と追加後。

要素パネルの改善

このバージョンでは、[要素] パネルにいくつかの改良が加えられています。

特定の要素により多くの状態を強制する

[要素] > [スタイル] の :hov セクションに、強制的に有効にできる擬似クラスが追加されました。新しいオプション セットは [特定の要素を強制的に適用] プルダウンの下にあり、選択した特定の要素に固有のものです。たとえば、<label> と <input> には異なるオプション セットがあります。

特定の要素の状態を強制する機能を追加する前と後。

Chromium の問題: 40280012。

[要素] > [スタイル] で、より多くのグリッド プロパティの予測入力が可能に

[要素] > [スタイル] タブに、グリッド領域と線の名前を編集する際の自動入力オプションが追加されました。

グリッド線の名前を編集する際に予測入力オプションを追加する前と後。

詳細については、CSS グリッド レイアウトを検査すると、特にその行名を表示するセクションをご覧ください。

Lighthouse 12.2.0

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

このアップデートでは、多くのバグが修正されています。変更点の詳細なリストをご覧ください。

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

Chromium の問題: 772558。

その他のハイライト

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

  • 要素:
    • オーバーロードされた長さのプロパティ 357020613 が正しくレンダリングされないバグを修正しました。
    • 仕様に従って position-try-options の名前が position-try-fallbacks に変更されました。
    • ページを更新すると、選択したノードが iframe 40719145 内にも復元されるようになりました。
    • ユーザー補助: スクリーン リーダーで、[要素を表示] ボタン 357382536 が読み上げられるようになりました。
  • [Performance] > [Network]: [Reveal in Network] メニュー オプションから、relevan ネットワーク リクエストの [Headers] タブが開くようになりました。
  • コンソール:
    • C/C++ 拡張機能のエラーでコンソールが強制的に開かなくなった 356320158。
    • JS モジュールの import.meta が一時停止時に評価されないバグを修正しました 40743793。
  • メモリ: リテーナーを無視した後に [無視したリテーナーを復元] が表示されないバグを修正しました（327337527）。

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

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

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

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

DevTools の新機能

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