DevTools の新機能（Chrome 124）

新しい自動入力パネル

このバージョンでは、DevTools に新しい [自動入力] パネルが導入されます。Chrome の自動入力は、保存されている住所をウェブサイトのフォームに自動入力するための便利な方法です。新しい [自動入力] パネルでは、フォームの項目、自動入力の予測値、保存済みのデータ間のマッピングを調べることができます。

テストデータがあるこちらのデモページの新しいパネルをお試しください。

1. [プロフィールの自動入力] で、[Fill form ...] のいずれかのボタンをクリックして [Submit] をクリックし、[Save address?] ダイアログ ウィンドウで [Save] をクリックして、フォームのページに戻ります。
2. DevTools を開き、自動入力イベントをトリガーします。フォーム フィールドを選択して、プルダウン リストからアドレスを選択します。

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

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

WebRTC の拡張ネットワーク スロットリング

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

新しいパラメータは、パケットロス（パーセント）、パケットキューの長さ（パケット数）、check_box パケット並べ替えフラグです。

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

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

Chromium の問題: 41175925。

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

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

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

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

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

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

Chromium の問題: 40166888

拡張パフォーマンス パネル

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

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

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

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

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

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

また、すべてのイニシエータの [Summary] タブに [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 コールスタックがパフォーマンス トレースに追加されますが、レポートの生成が遅くなる可能性があります。

トレースは more_vert [ツール] メニュー >Lighthouse レポートの生成後に、スロットリングされていないトレースを表示します。

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

Chromium の問題: 772558。

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

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

Chromium の問題: 41490331。

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

このバージョンでは、アプリケーションにいくつかの更新が行われています。ストレージ。

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

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

共有ストレージでは、無制限のクロスサイト ストレージ書き込みアクセス権と、プライバシーに配慮した読み取りアクセス権が提供されます。

Chromium の問題: 324464353

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

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

これに続いて、DevTools は [Application] パネルから [Web SQL] セクションを削除しました。

Chromium の問題: 327254049

カバレッジ パネルの改善

このバージョンでは、[カバレッジ] パネルにいくつかの更新が行われています。

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

• 使用済みのコードの色が緑色から灰色に変更され、特に 緑色無色覚障害

Chromium の問題: 41494198、329253687。

[レイヤ] パネルは廃止される可能性があります

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

チームがパネルを廃止する最終的な決断を下す前に、お気軽にご意見やご感想をお寄せください。

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

このバージョンでは、[JS Profiler] パネルが完全に非推奨になっており、再度有効にすることはできません。

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

Chromium の問題: 40262073。

その他のハイライト

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

• ネットワーク: <ph type="x-smartling-placeholder">
  </ph>
  • 複数行の Cookie が誤って解析されるバグを修正しました（325410304）。
  • [Initiator] 列のコールスタックのプレビューを修正しました（327665602）。
• パフォーマンス モニター: トラックのチェックボックスが他の UI と同じになりました（1467464）。
• ソース: XHTML ドキュメントの構文のハイライト表示を追加しました（327940244）。
• [設定] >デバイス: 古い Galaxy Fold は新しい Galaxy Z Fold 5（40113439）に置き換わります。
• パフォーマンス: Ctrl/Ctrl+Ctrl キーで検索したときに、一致した検索結果がすべてハイライト表示されるようになりました（1523279）。
• デベロッパー リソース: C/C++ DevTools Support（DWARF）Chrome 拡張機能（40746829）などの言語拡張機能によって読み込まれたリソースも表示されるようになりました。
• パフォーマンス: [Summary] タブでのトリミングされたコールスタックとそのレイアウトの誤りを修正しました（325314708）。
• ドロワー: 閉じる [Close] ボタンがフォーカス可能になり、キーボードを使用してパネルを閉じることができるようになりました。

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

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

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

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

• ご提案やフィードバックは、crbug.com からお送りください。
• DevTools の問題を報告するには、その他のオプション（） >ヘルプ >DevTools で DevTools の問題を報告します。
• @ChromeDevTools でツイートしてください。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。