DevTools の新機能（Chrome 124）

新しい自動入力パネル

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

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

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

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

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

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

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

新しいパラメータは、パケットロス（パーセント）、パケットキューの長さ（パケット数）、check_boxの [パケットの順序変更] フラグです。

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

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

Chromium の問題: 41175925。

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

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

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

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

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

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

Chromium の問題: 40166888。

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

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

フレーム チャートで関数とその子を非表示にする

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

子を非表示にしている関数には、右側に arrow_drop_down プルダウン ボタンがあります。カーソルを合わせると非表示の子の数が表示され、クリックすると再び表示されます。フレームグラフの初期状態に戻すには、関数を右クリックして [トレースをリセット] を選択します。

選択したイニシエータから、そのイニシエータが開始したイベントへの矢印

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

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

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。

[Application] > [Storage updates]

このバージョンでは、[アプリケーション] > [ストレージ] にいくつかの更新が加えられています。

共有ストレージの使用バイト数

[Application] > [Storage] > [Shared storage] セクションに、オリジンで使用されているバイト数が表示されるようになりました。

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

Chromium の問題: 324464353。

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

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

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

Chromium の問題: 327254049。

カバレッジ パネルの改善

このバージョンでは、[カバレッジ] パネルにいくつかのアップデートが加えられています。

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

• 使用済みのコードの色が緑色から灰色に変更され、特に緑色を認識できない色覚異常の方にとって視認性が向上しました。

Chromium の問題: 41494198、329253687。

[レイヤ] パネルはまもなくサポートを終了する可能性があります

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

チームがパネルの非推奨化を最終決定する前に、ご意見やご感想をお聞かせください。

JavaScript プロファイラの非推奨化: フェーズ 4（最終）

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

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

Chromium の問題: 40262073。

その他のハイライト

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

• ネットワーク:
  • 複数行の Cookie の解析が正しく行われないバグを修正しました（325410304）。
  • [イニシエータ] 列のコールスタックのプレビューを修正しました（327665602）。
• パフォーマンス モニター: トラック チェックボックスが UI の他の部分と同じになりました（1467464）。
• ソース: XHTML ドキュメントの構文ハイライトを追加しました（327940244）。
• 設定 > デバイス: 古い Galaxy Fold が新しい Galaxy Z Fold 5 に置き換えられました（40113439）。
• パフォーマンス: Ctrl/Cmd+F キー（1523279）で検索すると、一致する検索結果がすべてハイライト表示されるようになりました。
• デベロッパー リソース: C/C++ DevTools Support（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 の新機能シリーズで取り上げたすべての内容のリスト。