このページは Cloud Translation API によって翻訳されました。

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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。