このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 124）

Sofia Emelianova

新しい自動入力パネル

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

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

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

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

[自動入力] パネル。

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

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

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

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

新しいパケット関連オプションをカスタムスロットリングプロファイルに追加する前と後。

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

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

Chromium の問題: 41175925。

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

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

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

マウスアイコンでマークされたスクロールドリブンアニメーションのグループ。

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

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

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

インデントを追加し、ネストされたスタイルを中かっこで囲む前後のテキスト。

Chromium の問題: 40166888。

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

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

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

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

関数とその子を非表示にできるコンテキストメニューの追加前と追加後。

子が非表示の関数には、右側に 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 サンプリング設定を追加する前と後

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

JS サンプリングなし（左）と使用時（右）のパフォーマンストレース。

このトレースは、Lighthouse レポートが生成された後、more_vert の [Tools] メニュー > [View Unthrottled Trace] に表示されます。

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。

その他のハイライト

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。