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

DevTools の新機能（Chrome 121）

Sofia Emelianova

[ネットワーク] パネルの合理化されたフィルタバー

フィルタバーのデザインが刷新され、リクエストのフィルタが容易になり、[Network] パネルがすっきりと整理されました。

このバージョンでは、対応するテストがデフォルトでオンになっていますが、元に戻されます。進行状況は crbug.com/1523150 で確認できます。

新しいフィルタバーには 2 つのプルダウンメニューがあります。1 つはリクエストの種類を選択するためのメニュー、もう 1 つはデータや拡張機能の URL を非表示にするオプション、ブロックされた Cookie とリクエストのみを表示するオプション、サードパーティのリクエストを表示するオプションです。どちらのメニューも複数選択に対応しています。

以前のフィルタバーをすぐに戻すには、settings [設定] > [テスト] > check_box_outline_blank [ネットワーク] パネルのフィルタバーのデザイン変更をオフにします。

[Network] パネルのフィルタバーを簡素化する前と後。

この機能についてのフィードバックは、crbug.com/1500573 までお寄せください。

Chromium の問題: 1486431。

要素の改善

`@font-palette-values` のサポート

[要素] パネルで、CSS のアットルール @font-palette-values がサポートされるようになりました。これにより、font-palette プロパティのデフォルト値をカスタマイズできるようになります。

[Styles] で font-palette プロパティの値をクリックすると、@font-palette-values という専用セクションが表示され、そこでカスタム値を編集できます。

[Styles] の @font-palette-values セクション

Chromium の問題: 1501781。

サポートされているケース: 別のカスタムプロパティの代替としてのカスタムプロパティ

[要素] > [スタイル] で、別のカスタムプロパティのフォールバックであるカスタムプロパティが解決されるようになりました。

カスタムプロパティを別のカスタムプロパティの代替として解決する前と解決後。

Chromium の問題: 1499265。

ソースマップのサポートの改善

settings [設定] > [テスト] > check_box [ソースマップを使用して式内の変数名を解決する] がデフォルトでオンになりました。

DevTools では、ソースマップを使用して、結合、圧縮、コンパイルした後でも、[ソース] と [スコープ] で元のコードをデバッグできます。このテストでは、次のような DevTools 全体で元の変数名を一貫して評価できます（ただしこれらに限定されません）。

コンソールの式とオートコンプリートの候補
ライブ式
watch 式
条件付きブレークポイントとログポイント

詳細については、対応する RFC をご覧ください。

Chromium の問題: 1444349。

パフォーマンスパネルの改善点

拡張コンバージョンのトラック

[パフォーマンス] > [インタラクション] トラックでは、処理時間の境界における入力と表示の遅延を示すひげが表示されます。

インタラクショントラックにウィスカーを追加する前と後。

また、インタラクションにカーソルを合わせると、タイミングの詳細に関する便利なツールチップが表示されます。

Chromium の問題: 1495751。

[ボトムアップ]、[コールツリー]、[イベントログ] タブの高度なフィルタリング

[Performance] パネルの [Bottom-Up]、[Call Tree]、および [Event Log] タブに、高度なフィルタリング用の 3 つのボタンが新たに追加されました。

match_case 大文字と小文字の区別。
regular_expression 正規表現。
match_word 完全一致。

高度なフィルタリングに使用できる 3 つの新しいボタンが追加されました。

また、コンテキストの保持を容易にするため、[Bottom-Up] タブのフィルタには、最上位のアイテムのみがマッチするようになりました。以前は、フィルタはすべてのノードに一致していました。

Chromium の問題: 1496355。

[Sources] パネルのインデントマーカー

[Sources] パネルの [Editor] で、インデントされたコードブロックを縦線でマークするようになりました。

インデントされたコードブロックを縦線でマークする前と後。

Chromium の問題: 1479986。

[Network] パネルでオーバーライドされたヘッダーとコンテンツに関するツールチップ

リクエストの [Headers] タブと [Response] タブの横にある紫色のアイコンにカーソルを合わせると、[Network] パネルにツールチップが表示されるようになりました。ツールチップには、DevTools によってオーバーライドされた内容が表示されます。

[Headers] タブと [Response] タブの紫色のドットアイコンの横にある新しいツールチップ。

Chromium の問題: 1469776。

コマンドメニューに、ネットワークリクエストのブロックパターンを追加または削除するコマンドを入力できるようになりました。

ネットワークブロックパターンを追加または削除する新しいコマンドの追加前と追加後

[Add] コマンドを実行すると、パターンを指定するダイアログが表示されます。[Remove] コマンドを実行すると、[ネットワークリクエストのブロック] パネルが開かずに、すべてのパターンが削除されます。

CSP 違反テストが削除されました

バージョン 89 で導入された試験運用版の [CSP 違反] タブは、冗長なものとして削除されました。

CSP の詳細を一目で確認するには、[Application] > [Frames] > [Content Security Policy (CSP)] に移動します。

[Application] パネルのコンテンツセキュリティポリシー。

また、[Issues] パネルに CSP 違反が報告されます。

[Application] パネルのコンテンツセキュリティポリシー。

Lighthouse 11.3.0

[Lighthouse] パネルでは、Lighthouse 11.3.0 で実行されるようになりました。変更点の一覧をご覧ください。主な変更点として、404 ページに関してレポートを作成できるようになった点が挙げられます。

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

Chromium の問題: 772558。

ユーザー補助

このバージョンでは、ユーザー補助機能を次のように改善しています。

[ネットワーク] > [ペイロード] で、[ソースを表示] ボタンと [URL エンコードを表示] ボタンをタブにフォーカスして、Enter キーまたは Space キーを押して、対応するアクションをトリガーできるようになりました。
コンソールでは、混乱を避けるため、デバッガで利用できなくなったスクリプトへのリンクはグレー表示され、クリックできなくなりました。
[Sources] > [Page] のツリーなどのナビゲーションツリーで、Enter キーで、子があるノードの展開と折りたたみを行うようになりました。

Chromium に関する問題: 1338391、1500662、1420362。

その他のハイライト

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

パフォーマンス: 記録が失敗した場合に、未加工のトレースイベントをダウンロードして、何が問題かを把握できるようになりました（commit）。
コンソールを表示のショートカット（Mac の場合は Ctrl+`、Windows と Linux の場合は Ctrl++）を使用すると、コンソールが開くだけでなく、2 回目に押したときにも閉じるようになりました。
デベロッパー向けリソース:CSS リソースとその問題を報告できないバグを修正しました。（1420362）
要素:
- iframe 内の要素の検査に関するバグを修正しました。（1453375）
- 計算済み。デフォルト値をレンダリングできないバグを修正しました。（1499882）
- Search に送信できます。1 文字または 2 文字の短いクエリで一致数を計算できないバグを修正しました。（1416457）
コンソール。[フィルタ] ボックス内のエスケープされた文字で終わる正規表現が正しく解析されるようになりました。（1346936）
[設定] > [ワークスペース]。除外するフォルダを追加できないバグを修正しました。（1503580）
[ネットワーク] > [プレビュー]。data: URI を使用して画像をレンダリングするようになりました。（1381791）
メモリ。アクションバーに適切なアップロードの読み込みボタンとダウンロード保存ボタンを追加しました。（1275407）

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

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

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

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

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