DevTools の新機能（Chrome 124）

Sofia Emelianova
Sofia Emelianova
GitHub

新しい自動入力パネル

このバージョンでは、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 サンプリング設定を追加する前と後

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

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

トレースは 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/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 の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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