DevTools の新機能（Chrome 129）

Sofia Emelianova
Sofia Emelianova
GitHub

Recorder が Firefox 用 Puppeteer へのエクスポートをサポート

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

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

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

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

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

ライブ指標の観測

[パフォーマンス] パネルに、ローカルマシンと Chrome ユーザー エクスペリエンス レポートのフィールド データに基づいて、ウェブに関する主な指標に関するライブ観測が表示されるようになりました。これにより、パフォーマンス トレースをキャプチャしなくてもパフォーマンスの問題を特定し、ユーザーの体験と比較して自分の体験がどの程度代表的であるかを把握できます。

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 グリッド レイアウトを検査する と、特にその Show line names セクションをご覧ください。

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 の新機能シリーズで取り上げられたすべての内容の一覧。