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

DevTools の新機能（Chrome 124）

Sofia Emelianova

新しい自動入力パネル

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

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

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

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

自動入力パネル。

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

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

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

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

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

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

Chromium の問題: 41175925

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

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

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

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

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

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

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

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

Chromium の問題: 40166888

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

このバージョンでは、[パフォーマンス] パネルを改善しました。

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

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

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

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

これまでは、メイン トラックでイベントを選択すると、開始元から選択したイベントへの矢印がトラックに表示されていました。また、選択したイベントから開始したイベント（ある場合）への矢印もトラックに表示されるようになりました。

選択したイベントから開始されたイベントへの矢印と、「表示」の代わりに名前付きリンクを表示する前後。

また、[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 サンプリングなし（左）と JS サンプリングあり（右）のパフォーマンストレース。

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

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

Chromium の問題: 772558。

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

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

特別なオブジェクトのグループの説明ツールチップを表示する前と後。

Chromium の問題: 41490331

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

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

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

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

共有ストレージに使用されるバイト数を示す変更前と変更後の画面。

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

Chromium の問題: 324464353

Web SQL は完全に非推奨になりました

Chrome バージョン 119 で Web SQL が非推奨になり、このバージョンでは非推奨トライアルトークンが削除されたため、Web SQL は使用できなくなりました。

その後、DevTools では [Application] パネルから [Web SQL] セクションが削除されました。

Chromium の問題: 327254049。

カバレッジパネルの改善

このバージョンでは、[カバレッジ] パネルにいくつかの更新を行いました。

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

一致する子の統計情報を正しく計算する前と後。

特に緑色が見えない方のために、使用されているコードの色が緑色ではなく灰色になりました。

使用したコードの色をグレーに変更する前と後。

Chromium の問題: 41494198, 329253687

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

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

[レイヤ] パネルの上部に、サポート終了の可能性を知らせる警告バナー。

パネルを廃止する最終決定が下される前に、ご意見やご感想をお聞かせください。

JavaScript Profiler の非推奨: フェーズ 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）などの言語拡張機能を介して読み込まれたリソースも表示されるようになりました。
パフォーマンス: [概要] タブでのトリミングされたコールスタックと不適切なレイアウトを修正しました。（325314708）
ドロワー: 閉じるの [閉じる] ボタンがフォーカス可能になり、キーボードでパネルを閉じることができるようになりました。

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

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

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

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

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