DevTools の新機能（Chrome 93）

Jecelyn Yeen

[スタイル] ペインで編集可能な CSS コンテナクエリ

[スタイル] ペインで、CSS コンテナクエリを表示、編集できるようになりました。

コンテナクエリでは、レスポンシブ デザインをはるかに動的に進めることができます。@container アットルールは、@media を含むメディアクエリと同様に機能します。ただし、@container はビューポートとユーザー エージェントに情報をクエリするのではなく、特定の条件に一致する祖先コンテナをクエリします。

[Elements] パネルで、@container アットルールがある DOM 要素をクリックすると、DevTools の [Styles] ペインに @container 情報が表示されます。クリックするとサイズを編集できます。[スタイル] ペインには、対応するコンテナ情報も表示されます。カーソルを合わせると、ページ上のコンテナ要素がハイライト表示され、コンテナのサイズを確認します。これをクリックしてコンテナ要素を選択します。

コンテナクエリ機能は現在試験運用版です。chrome://flags で #enable-container-queries フラグをオンにしてテストしてください。

[スタイル] ペインで編集可能な CSS コンテナクエリ

Chromium の問題: 1146422

[ネットワーク] パネルでのウェブバンドルのプレビュー

ウェブバンドルは、1 つ以上の HTTP リソースを 1 つのファイルにカプセル化するファイル形式です。これで、[ネットワーク] パネルでウェブバンドルのコンテンツをプレビューできるようになりました。

ウェブバンドル機能は現在試験運用版です。テストするには、chrome://flags で #enable-experimental-web-platform-features フラグを有効にしてください。

ウェブバンドルのプレビュー

Chromium の問題: 1182537

Attribution Reporting API のデバッグ

Attribution Reporting API のエラーが [問題] タブで報告されるようになりました。

Attribution Reporting は、クロスサイト識別子を使用せずに、ユーザー アクション（広告のクリックや表示など）がコンバージョンにつながったタイミングを測定できる新しい API です。

[問題] タブに表示される Attribution Reporting API のエラー

Chromium の問題: 1190735

コンソールでの文字列処理の改善

コンソールの新しいコンテキスト メニューで、任意の文字列をコンテンツ、JavaScript リテラル、または JSON リテラルとしてコピーできるようになりました。

コンソールの新しいコンテキスト メニュー

Chrome 90 で、DevTools のコンソールが更新され、常に文字列出力を有効な JSON リテラルとしてフォーマットするようになりました。デベロッパーの皆様から、この変更が混乱を招く可能性があるというフィードバックが寄せられており、エスケープの文字数が多すぎて出力を読み取れないというご意見をいただきました。

コンソールで、文字列出力が有効な JavaScript リテラルとしてフォーマットされるようになり、さらに 3 つの文字列をコピーできるようになりました。[JavaScript リテラルとしてコピー] オプションを使用すると、適切な特殊文字がエスケープされ、文字列の内容に応じて一重引用符、二重引用符、バッククォートのいずれかで文字列がラップされます。Copy string content は、未加工の文字列の内容（改行やその他の特殊文字を含む）をそのままクリップボードにコピーします。最後に、[Copy as JSON リテラル] は文字列を有効な JSON リテラルとしてフォーマットし、クリップボードにコピーします。

Chromium の問題: 1208389

CORS デバッグの改善

コンソールの CORS 関連の TypeError が [ネットワーク] パネルと [問題] タブにリンクされるようになりました。

CORS 関連のエラー メッセージの横にある 2 つの新しいアイコンをクリックしてネットワーク リクエストを表示するか、[問題] タブでエラー メッセージを理解して解決策を確認します。

CORS 関連のエラー メッセージの横にあるアイコン

Chromium の問題: 1213393

Lighthouse 8.1

[Lighthouse] パネルでは、Lighthouse 8.1 が実行されるようになりました。

灯台

サイトでソースマップを Lighthouse に公開している場合は、[View Treemap] ボタンを探すことで、配布した JavaScript の内訳を確認できます。この内訳は、読み込み時にサイズやカバレッジでフィルタできます。

このレポートには、新しい指標フィルタも含まれています（スクリーンショットの [関連する監査を表示] フィルタをご覧ください）。指標を選択して、その指標のみの改善に最も関連する最適化案と診断に注目します。

パフォーマンス カテゴリのスコアは、他のパフォーマンス ツールと整合するよう、またウェブの状況をより適切に反映するために、いくつかの変更が加えられました。

変更内容の完全なリストについては、リリースノートをご覧ください。

Chromium の問題: 772558

[マニフェスト] ペインに新しいメモの URL を表示する

[マニフェスト] ペインに新しいメモの URL が表示されます。

現在、ChromeOS（CrOS）、Chrome アプリ、Android アプリで「新しい注意事項」を宣言するタッチペンの設定でメモ作成アプリとして機能を選択できる（ChromeOS デバイスでタッチペンを使用している場合に表示されます）。メモ作成アプリとして選択すると、タッチペン パレットの [メモを作成] からアプリを起動できます。] ボタンを離します。ウェブアプリ マニフェストに new-note-url フィールドを追加することは、ウェブアプリに同等の機能を追加する取り組みの一環です。

[マニフェスト] ペインの新しいメモの URL

Chromium の問題: 1185678

CSS マッチング セレクタを修正しました

DevTools で CSS マッチング セレクタが修正されましたが、前回のリリースでは動作していませんでした。

[スタイル] ペインのカンマ区切りのセレクタは、選択した DOM ノードと一致するかどうかによって色が異なります。

  • 一致しない部分は薄いグレーで表示されます。
  • 一致するセレクタ部分は黒で表示されます。

CSS マッチング セレクタ

Chromium の問題: 1219153

[Network] パネルでの JSON レスポンスのプリティ プリント

[Network] パネルで JSON レスポンスをプリティ プリントできるようになりました。

[Network] パネルで JSON レスポンスを開き、{} アイコンをクリックしてプリティ プリントします。

[Network] パネルでの JSON レスポンスのプリティ プリント

Chromium のバグ: 998674

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

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

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

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

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

DevTools の新機能

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