DevTools の新機能（Chrome 124）

新しい自動入力パネル

このバージョンでは、DevTools に新しい [自動入力] パネルが追加されました。Chrome の自動入力を使用すると、保存した住所を使ってウェブサイトのフォームに自動的に入力できます。新しい [自動入力] パネルでは、フォーム フィールド、予測された自動入力値、保存されたデータ間のマッピングを検査できます。

こちらのデモページで、テストデータを使用して新しいパネルをお試しください。

1. [プロフィール自動入力] で [フォームに入力...] ボタンのいずれかをクリックし、[送信] をクリックします。[住所を保存しますか？] ダイアログ ウィンドウで [保存] をクリックし、フォームのあるページに戻ります。
2. DevTools を開き、自動入力イベントをトリガーします。フォーム フィールドを選択し、プルダウン リストから住所を選択します。

[自動入力] パネルが自動的に開き、検出されたフォーム フィールド、自動入力によって推測されたフィールド、保存された値が表示されます。

詳細については、フォームの学習と自動入力をご覧ください。

WebRTC のネットワーク スロットリングを強化

カスタム ネットワーク スロットリング プロファイルにパケット関連のパラメータが新たに追加されたため、DevTools で直接 WebRTC アプリケーションをスロットリングできるようになりました。これは、サードパーティ製ソフトウェアを使用せずに、リアルタイム通信の実装をテストするのに役立ちます。

新しいパラメータは、Packet Loss（パケットロス率）、Packet Queue Length（パケットキューの長さ）、check_box Packet Reordering フラグです。

WebRTC 接続をスロットリングするには、設定の [設定] > [スロットリング] でカスタム プロファイルのパケット関連パラメータを指定し、[ネットワーク] パネルで選択します。

新しいパラメータは、こちらのデモページでお試しいただけます。まず、ページにカメラの使用を許可します。次に、[ネットワーク] パネルで、構成したカスタム プロファイルを選択し、ページに戻って [開始] と [呼び出し] をクリックします。

Chromium の問題: 41175925。

アニメーション パネルでのスクロールドリブン アニメーションのサポート

[アニメーション] パネルで、スクロールドリブン アニメーションを検査できるようになりました。

こちらのデモページでこの機能をお試しください。[アニメーション] パネルを開き、ページを再読み込みして、スクロール ドリブンのアニメーションをキャプチャします。

[概要] に、マウス アイコンが付いたアニメーション グループが表示されます。これで検査できるようになりました。グループのタイムラインには、ミリ秒ではなくピクセル値が表示されます。

[要素] > [スタイル] での CSS ネストのサポートを改善

[要素] > [スタイル] タブで CSS のネストをサポートし、ネストされたスタイルをインデント付きで中かっこで表示できるようになりました。CSS のネストは、CSS ルールをグループ化して、冗長性を減らし、構造を整える方法です。

Chromium の問題: 40166888。

[パフォーマンスの向上] パネル

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

フレームグラフで関数とその子を非表示にする

[パフォーマンス] > [メイン] のフレームグラフからノイズを除外するために、関連性のない関数とその子を非表示にできるようになりました。フレームグラフで関数を右クリックし、コンテキスト メニューからオプションを選択します。

子要素が非表示になっている関数には、右側に arrow_drop_down プルダウン ボタンがあります。非表示のチャイルドの数を確認するには、このアイコンにカーソルを合わせ、もう一度表示するにはクリックします。フレームグラフの初期状態に戻すには、関数を右クリックして [トレースのリセット] を選択します。

選択した開始元から開始したイベントへの矢印

以前は、Main トラックでイベントを選択すると、イニシエータから選択したイベントへの矢印がトラックに表示されていました。トラックには、選択したイベントから、そのイベントが開始したイベント（存在する場合）への矢印も表示されます。

また、すべてのイニシエータの [概要] タブに [Initiator for] フィールドが追加され、[Initiator for] フィールドと [Initiated by] フィールドの両方に [Reveal] ではなく名前付きリンクが表示されるようになりました。

Chromium の問題: 325604258、325024819、326055289。

Lighthouse 11.6.0

[Lighthouse] パネルで Lighthouse 11.6.0 が実行されるようになりました。変更点の詳細なリストをご覧ください。

主な変更点として、新しいオプトイン check_box_outline_blank [JS サンプリングを有効にする] 設定があります。この設定はデフォルトで無効になっています。

JS サンプリングを有効にすると、詳細な JavaScript 呼び出しスタックがパフォーマンス トレースに加えられますが、レポートの生成が遅くなる可能性があります。

トレースには、Lighthouse レポートの生成後に、more_vert ツールメニュー > [View Unthrottled Trace] からアクセスできます。

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

Chromium の問題: 772558。

[メモリ] > [ヒープ スナップショット] の特別なカテゴリのツールチップ

[メモリ] パネルのヒープ スナップショットには、コンストラクタに基づかないオブジェクトの特別なグループがあります。このようなオブジェクトにカーソルを合わせると、[メモリ] パネルに、簡単な説明と、ドキュメントの詳細な説明へのリンクを含むツールチップが表示されるようになりました。

Chromium の問題: 41490331。

[アプリケーション] > [ストレージの更新]

このバージョンでは、[アプリ] > [ストレージ] が更新されています。

共有ストレージに使用されたバイト数

[アプリケーション] > [ストレージ] > [共有ストレージ] セクションに、オリジンで使用されたバイト数が表示されるようになります。

共有ストレージを使用すると、プライバシーを保護した読み取りアクセスとともに、クロスサイトのストレージへの無制限の書き込みアクセスが可能になります。

Chromium の問題: 324464353。

Web SQL のサポートが完全に終了しました

Chrome はバージョン 119 で WebSQL のサポートを終了し、このバージョンでデプリケーション トライアル トークンを削除したため、WebSQL は使用できなくなりました。

それに伴い、DevTools の [アプリケーション] パネルから [Web SQL] セクションが削除されました。

Chromium の問題: 327254049。

カバレッジ パネルの改善

このバージョンでは、[カバレッジ] パネルが次のように更新されています。

• ステータスバーで、フィルタされた URL の使用状況統計が正しく計算されるようになりました。以前は、フィルタに一致した子 URL の使用状況データの合計ではなく、親 URL のデータの合計が計算されていました。

• 使用済みコードの色が緑色からグレーに変更され、特に緑色の色覚異常があるユーザーにとって視認性が向上しました。

Chromium の問題: 41494198、329253687。

[レイヤ] パネルのサポートが終了する可能性があります

[レイヤ] パネルは、使用頻度が低いためまもなくサポートを終了する可能性があります。パネルの上部に警告バナーが表示されます。

パネルのサポート終了に関する最終決定を下す前に、ご意見やご懸念をお聞かせください。

JavaScript プロファイラのサポート終了: フェーズ 4（最終）

このバージョンでは、JS プロファイラ パネルが完全に非推奨になり、再び有効にすることはできません。

CPU パフォーマンスをプロファイリングするには、[パフォーマンス] パネルを使用します。

Chromium の問題: 40262073。

その他のハイライト

このリリースの主な修正と改善点は次のとおりです。

• ネットワーク:
  • 複数行のクッキーが正しく解析されないバグを修正しました。（325410304）
  • [Initiator] 列の呼び出しスタック プレビューを修正しました（327665602）。
• パフォーマンス モニター: トラッキング チェックボックスが UI の他の部分と同じになりました（1467464）。
• ソース: XHTML ドキュメントの構文ハイライト表示を追加しました（327940244）。
• [設定] > [デバイス]: 古い Galaxy Fold が新しい Galaxy Z Fold 5（40113439）に置き換えられました。
• パフォーマンス: Ctrl/Cmd+F キーで検索すると、一致した検索結果がすべてハイライト表示されるようになります（1523279）。
• デベロッパー リソース: C/C++ DevTools サポート（DWARF）Chrome 拡張機能（40746829）など、言語拡張機能によって読み込まれたリソースも表示されるようになりました。
• パフォーマンス: [概要] タブで、切り詰められた呼び出しスタックとその不適切なレイアウトを修正しました（325314708）。
• ドロワー: 閉じる 閉じるボタンにフォーカスを当てられるようになりました。これにより、キーボードを使用してパネルを閉じることができます。

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

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

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

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

• フィードバックや機能リクエストは crbug.com から送信してください。
• DevTools で more_vert [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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