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

DevTools の新機能（Chrome 121）

Sofia Emelianova

[ネットワーク] パネルのフィルタバーを簡素化しました

フィルタバーのデザインが一新され、リクエストをフィルタしやすくなり、[ネットワーク] パネルが見やすくなりました。

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

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

以前のフィルタバーをすぐに元に戻すには、設定 [設定] > [テスト] > check_box_outline_blank [ネットワークパネルのフィルタバーの再設計] をオフにします。

[ネットワーク] パネルのフィルタバーを合理化する前と後。

この機能に関するフィードバックは、crbug.com/1500573 にお気軽にお寄せください。

Chromium の問題: 1486431。

要素の改善

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

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

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

[スタイルの] の @font-palette-values セクション

Chromium の問題: 1501781。

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

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

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

Chromium の問題: 1499265。

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

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

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

コンソールの式と予測入力の候補
ライブ式
Watch 式
条件付きブレークポイントとログポイント

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

Chromium の問題: 1444349

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

エンハンストインタラクショントラッキング

[Performance] > [Interactions] トラックには、処理時間の境界における入力とプレゼンテーションの遅延を示すひげが表示されます。

Interactions トラックにひげを追加する前と後のひげ。

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

Chromium の問題: 1495751。

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

[パフォーマンス] パネルの [ボトムアップ]、[コールツリー]、[イベントログ] の各タブに、高度なフィルタリング用のボタンが新たに 3 つ追加されました。

match_case: 大文字と小文字の区別。
regular_expression。正規表現。
match_word 完全に一致する単語を照合します。

高度なフィルタ用の 3 つの新しいボタン。

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

Chromium の問題: 1496355。

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

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

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

Chromium の問題: 1479986。

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

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

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

Chromium の問題: 1469776。

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

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

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

CSP 違反のテストは削除されます

バージョン 89 で導入された試験運用版の [CSP 違反] タブは廃止されました。

CSP の詳細を一目で確認するには、[アプリケーション] > [フレーム] > [コンテンツセキュリティポリシー（CSP）] に移動します。

[アプリケーション] パネルのコンテンツセキュリティポリシー。

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

[アプリケーション] パネルのコンテンツセキュリティポリシー。

Lighthouse 11.3.0

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

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

Chromium の問題: 772558。

ユーザー補助

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

[ネットワーク] > [ペイロード] で、[ソースを表示] ボタンと [URL エンコードを表示] ボタンをタブでフォーカスし、Enter キーまたは Space キーを押して、対応するアクションをトリガーできるようになりました。
コンソールでは、混乱を避けるために、Debugger で利用できなくなったスクリプトへのリンクはグレー表示され、クリックできなくなりました。
[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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。