DevTools の新機能（Chrome 121）

Sofia Emelianova
Sofia Emelianova
GitHub

ネットワーク パネルのフィルタバーを簡素化

リクエストを簡単にフィルタし、[ネットワーク] パネルの整理を容易にするため、フィルタバーが再設計されました。

対応するテストは、このバージョンではデフォルトでオンになっていましたが、元に戻されます。進捗状況のトラッキング用シート: crbug.com/1523150

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

以前のフィルタバーをすぐに復元するには、 [設定] > [試験運用版] > [[ネットワーク] パネルのフィルタバーのデザイン変更] をオフにします。

[ネットワーク] パネルのフィルタバーを合理化した前後の様子。

この機能に関するフィードバックは、crbug.com/1500573 からお送りください。

Chromium の問題: 1486431。

要素の改善

@font-palette-values のサポート

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

[スタイル] で font-palette プロパティの値をクリックすると、DevTools の @font-palette-values 専用セクションに移動し、カスタム値を編集できます。

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

Chromium の問題: 1501781。

サポートされているケース: 別のカスタム プロパティのフォールバックとしてカスタム プロパティを使用する

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

別のカスタム プロパティのフォールバックとしてカスタム プロパティを解決する前と後。

Chromium の問題: 1499265。

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

[設定] > [試験運用版] > [ソースマップを使用して式内の変数名を解決する] がデフォルトでオンになっています。

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

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

Chromium の問題: 1444349。

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

拡張インタラクション トラック

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

インタラクション トラックにヒゲを追加する前と後。

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

Chromium の問題: 1495751。

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

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

  • 大文字と小文字を区別する。
  • 正規表現。
  • 完全一致。

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

また、コンテキストを維持するために、[ボトムアップ] タブのフィルタに一致するのは最上位アイテムのみになりました。以前は、フィルタはすべてのノードに一致していました。

Chromium の問題: 1496355。

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

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

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

Chromium の問題: 1479986。

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

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

[ヘッダー] タブと [レスポンス] タブの紫色のドットアイコンの横に表示される新しいツールチップ。

Chromium の問題: 1469776。

リクエストのブロック パターンを追加、削除するための新しいコマンド メニュー オプション

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

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

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

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

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

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

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

また、問題パネルに CSP 違反が表示されます。

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

Lighthouse 11.3.0

[Lighthouse] パネルで Lighthouse 11.3.0 が実行されるようになりました。変更点の詳細なリストをご覧ください。主な変更点として、404 ページに関するレポートを実行できるようになりました。

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

Chromium の問題: 772558。

ユーザー補助

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

  • [ネットワーク] > [ペイロード] で、Tab キーを押して [ソースを表示] ボタンと [URL エンコードを表示] ボタンにフォーカスを移動し、Enter キーまたは Space キーを押して、対応するアクションをトリガーできるようになりました。
  • コンソールでは、混乱を避けるため、デバッガで使用できなくなったスクリプトへのリンクがグレー表示になり、クリックできなくなりました。
  • [ソース] > [ページ] のツリーなど、ナビゲーション ツリーで 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 の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。