DevTools の新機能（Chrome 93）

Jecelyn Yeen

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

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

コンテナクエリは、レスポンシブ デザインに対してよりダイナミックなアプローチを提供します。@container アットルールは、@media を使用したメディアクエリと同様に機能します。ただし、@container はビューポートとユーザー エージェントから情報をクエリするのではなく、特定の条件に一致する祖先コンテナをクエリします。

[要素] パネルで、@container アットルールを含む DOM 要素をクリックすると、DevTools の [スタイル] ペインに @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 です。

[Issues] タブの Attribution Reporting API エラー

Chromium の問題: 1190735

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

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

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

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

コンソールで、文字列出力を有効な JavaScript リテラルとしてフォーマットするようになりました。また、3 つのコピー文字列オプションも提供されます。[JavaScript リテラルとしてコピー] オプションを選択すると、適切な特殊文字がエスケープされ、文字列の内容に応じて文字列がシングル クォート、ダブル クォート、バッククォートいずれかで囲まれます。一方、[文字列をそのままコピー] は、未加工の文字列の内容（改行やその他の特殊文字を含む）をそのままクリップボードにコピーします。最後に、[JSON リテラルとしてコピー] は、文字列を有効な JSON リテラルとしてフォーマットし、クリップボードにコピーします。

Chromium の問題: 1208389

CORS デバッグの改善

Console の 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 の新機能シリーズで取り上げられたすべての内容のリスト。