DevTools の新機能（Chrome 129）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

詳細については、WebDriver BiDi - クロスブラウザ自動化の未来をご覧ください。

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

このバージョンでは、[パフォーマンス] パネルが大幅に改善されています。

ライブ指標の観測

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

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

[パフォーマンス] パネルの指標に関するリアルタイムの観測値。

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

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

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

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

[Summary] タブの [Performance] パネルに、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 が読み上げられるようになりました。
  • [パフォーマンス] > [ネットワーク]: [ネットワークで表示] メニュー オプションで、関連するネットワーク リクエストの [ヘッダー] タブが開くようになりました。
  • コンソール:
    • C/C++ 拡張機能のエラーでコンソールが強制的に開かなくなった 356320158。
    • JS モジュールの import.meta が一時停止時に評価されないバグを修正しました 40743793。
  • メモリ: リテーナーを無視した後に [無視したリテーナーを復元] が表示されないバグを修正しました（327337527）。

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

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

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

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

DevTools の新機能

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