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

DevTools の新機能（Chrome 93）

Jecelyn Yeen

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

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

コンテナクエリを使用すると、より動的な方法でレスポンシブデザインを実現できます。@container at ルールは、@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 リテラルとしてコピー] オプションを使用すると、適切な特殊文字がエスケープされ、文字列の内容に応じて、一重引用符、二重引用符、バッククォートのいずれかで文字列が囲まれます。代わりに、[文字列の内容をコピー] は、未加工の文字列内容（改行やその他の特殊文字を含む）をそのままクリップボードにコピーします。最後に、[JSON リテラルとしてコピー] は、文字列を有効な JSON リテラルとしてフォーマットし、クリップボードにコピーします。

Chromium の問題: 1208389

CORS デバッグの改善

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

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

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

Chromium の問題: 1213393

Lighthouse 8.1

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

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

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

パフォーマンスカテゴリでは、他のパフォーマンスツールに合わせてスコア付けを変更し、ウェブの状況をより適切に反映するようにしました。

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

Chromium の問題: 772558

[Manifest] ペインに新しいメモの URL を表示する

[Manifest] ペインに新しいメモの URL が表示されます。

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

[Manifest] ペインの新しいメモの URL

Chromium の問題: 1185678

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

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

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

一致しなかった部分は薄い灰色で表示されます。
一致するセレクタ部分は黒で表示されています。

CSS マッチングセレクタ

Chromium の問題: 1219153

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

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

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

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

Chromium のバグ: 998674

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

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

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

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

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