DevTools の新機能（Chrome 121）

ネットワーク パネルのフィルタバーが簡素化されました

フィルタバーが再設計され、リクエストのフィルタリングが容易になり、[ネットワーク] パネルがすっきりしました。

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

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

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

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

Chromium の問題: 1486431。

要素の改善

@font-palette-values のサポート

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

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

Chromium の問題: 1501781。

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

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

Chromium の問題: 1499265。

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

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

DevTools は、ソースマップを使用して、結合、軽量化、コンパイル後でも [ソース] と [スコープ] で元のコードをデバッグできるようにします。このテストでは、DevTools 全体で元の変数名を一貫して評価できます。たとえば、次のようなものがあります。

• コンソールの式とオートコンプリートの候補

  

• ライブ表現

  

• Watch 式

  

• 条件付きブレークポイントとログポイント

  

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

Chromium の問題: 1444349。

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

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

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

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

Chromium の問題: 1495751。

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

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

• match_case 大文字 / 小文字を区別する。
• regular_expression 正規表現。
• match_word: 完全一致。

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

Chromium の問題: 1496355。

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

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

Chromium の問題: 1479986。

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

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

Chromium の問題: 1469776。

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

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

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

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

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

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

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

Lighthouse 11.3.0

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

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

Chromium の問題: 772558。

ユーザー補助

このバージョンでは、アクセシビリティが次のように改善されています。

• [ネットワーク] > [ペイロード] で、[ソースを表示] ボタンと [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）。
• [設定] > [Workspace]。除外フォルダを追加できないバグを修正しました（1503580）。
• [ネットワーク] > [プレビュー]。data: URI を使用した画像のレンダリングに対応しました（1381791）。
• メモリ。アクションバーに適切なアップロード読み込みボタンとダウンロード保存ボタンを追加しました（1275407）。

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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