DevTools の新機能（Chrome 121）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

この機能に関するフィードバックは、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。

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

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

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

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

Chromium の問題: 1444349

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

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

パフォーマンス >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 で利用できなくなったスクリプトへのリンクはグレー表示され、クリックできなくなりました。
  • ナビゲーション ツリー（[ソース] >Page キーの場合、Enter キーで子ノードを展開または折りたたむことができるようになりました。

Chromium の問題: 1338391、1500662、1420362。

その他のハイライト

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

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

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

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

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

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

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

DevTools の新機能

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