DevTools の新機能（Chrome 93）

Jecelyn Yeen

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

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

コンテナクエリを使用すると、レスポンシブ デザインに動的なアプローチを適用できます。@container at-rule は、@media を使用したメディアクエリと同様に機能します。ただし、@container は、ビューポートとユーザー エージェントに情報をクエリするのではなく、特定の条件に一致する祖先コンテナをクエリします。

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

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

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

Chromium の問題: 1146422

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

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

ウェブ バンドル機能は現在、試験運用版です。テストするには、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 つの文字列コピー オプションが提供されるようになりました。[Copy as JavaScript literal] オプションでは、適切な特殊文字がエスケープされ、文字列の内容に応じて文字列が単一引用符、二重引用符、バッククォートのいずれかで囲まれます。[文字列をそのままコピー] を選択すると、文字列の内容（改行文字やその他の特殊文字を含む）がそのままクリップボードにコピーされます。最後に、[JSON リテラルとしてコピー] を選択すると、文字列が有効な JSON リテラルとしてフォーマットされ、クリップボードにコピーされます。

Chromium の問題: 1208389

CORS デバッグの改善

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

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

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

Chromium の問題: 1213393

Lighthouse 8.1

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

灯台

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

レポートには、新しい指標フィルタも含まれています（スクリーンショットの [関連する監査を表示] フィルタを参照）。指標を選択すると、その指標の改善に最も関連性の高い機会と診断に焦点を当てることができます。

パフォーマンス カテゴリでは、他のパフォーマンス ツールとの整合性を図り、ウェブの状態をより正確に反映するため、スコアの算出方法がいくつか変更されました。

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

Chromium の問題: 772558

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

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

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

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

Chromium の問題: 1185678

CSS の一致セレクタを修正

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

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

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

CSS の一致するセレクタ

Chromium の問題: 1219153

[ネットワーク] パネルで JSON レスポンスを整形して出力する

[ネットワーク] パネルで JSON レスポンスを整形して出力できるようになりました。

[ネットワーク] パネルで JSON レスポンスを開き、{} アイコンをクリックして書式付きで出力します。

[ネットワーク] パネルで JSON レスポンスを整形して出力する

Chromium のバグ: 998674

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

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

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

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

DevTools の新機能

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