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

DevTools の新機能（Chrome 96）

Jecelyn Yeen

プレビュー機能: 新しい [CSS の概要] パネル

新しい [CSS の概要] パネルを使用して、ページの CSS で改善の余地がある要素を特定します。 [CSS の概要] パネルを開き、[概要を取得] をクリックして、ページの CSS のレポートを生成します。

情報をさらに詳しく調べることができます。たとえば、[色] セクションで色をクリックすると、同じ色が適用されている要素のリストが表示されます。要素をクリックすると、[要素] パネルで要素が開きます。

[CSS Overview] パネルはプレビュー機能です。現在、担当チームがこの機能の開発に積極的に取り組んでおり、さらなる機能強化についてのフィードバックをお待ちしています。

[CSS の概要] パネルについて詳しくは、こちらの記事をご覧ください。

CSS の概要パネル

Chromium の問題: 1254557

CSS の長さの編集とコピーの操作性を改善して改善しました

長さが指定された CSS プロパティについて、CSS をコピーとテキストとして編集が復元されます。これらのエクスペリエンスは前回のリリースでは機能していません。

また、プルダウンを使用して、ドラッグして単位値を調整したり、単位の種類を更新したりできます。このアドオンの長さ作成機能は、テキストエクスペリエンスとしてのメインの編集には影響しません。

問題が見つかった場合は、goo.gle/length-feedback から報告してください。

無効にするには、[設定] > [テスト] > [[スタイル] ペインで CSS 長さオーサリングツールを有効にする] チェックボックスを選択します。

Chromium に関する問題: 1259088、1172993

[レンダリング] タブの更新

CSS Preferreds-const メディア特性をエミュレートする

prefers-const メディア機能は、ユーザーがページ内のコントラストの調整を求めたかどうかを検出するために使用されます。

コマンドメニューを開いて [Show Rendering] コマンドを実行し、[Emulate CSS media featurepreferreds-const] プルダウンを設定します。

Chromium の問題: 1139777

Chrome の自動ダークモード機能をエミュレートする

DevTools を使用して自動ダークモードをエミュレートすると、Chrome の自動ダークモードが有効になっている場合にページがどのように表示されるかを簡単に確認できます。

Chrome 96 では、Android 向けの Auto Dark Theme のオリジントライアルが導入されます。この機能を使用すると、ユーザーがオペレーティングシステムでダークモードを有効にしている場合に、ライトテーマのサイトに自動生成されたダークモードが適用されます。

コマンドメニューを開き、[レンダリングを表示] コマンドを実行して、[自動ダークモードのエミュレート] プルダウンを設定します。

Chrome の自動ダークモード機能をエミュレートする

Chromium の問題: 1243309

[Styles] ペインで宣言を JavaScript としてコピーする

コンテキストメニューに 2 つの新しいオプションが追加され、CSS ルールを JavaScript プロパティとして簡単にコピーできるようになりました。これらのショートカットオプションは、特に CSS-in-JS ライブラリを扱うデベロッパーにとって便利です。

[スタイル] ペインで、CSS ルールを右クリックします。[宣言を JS としてコピー] を選択して 1 つのルールをコピーするか、[すべての宣言を JS としてコピー] を選択してすべてのルールをコピーします。

たとえば、以下の例では paddingLeft: '1.5rem' をクリップボードにコピーします。

宣言を JavaScript としてコピー

Chromium の問題: 1253635

[Network] パネルの新しい [Payload] タブ

ペイロードを含むネットワークリクエストを調べる場合は、[Network] パネルの新しい [Payload] タブを使用します。これまで、ペイロード情報は [Headers] タブに表示されていました。

[Network] パネルの [Payload] タブ

Chromium の問題: 1214030

[プロパティ] ペインのプロパティ表示の改善

[プロパティ] ペインには、インスタンスのすべてのプロパティではなく、関連するプロパティのみが表示されるようになりました。DOM プロトタイプとメソッドが削除されました。

Chrome 95 では、[プロパティ] ペインの機能強化により、関連するプロパティを見つけやすくなりました。

[Properties] ペインのプロパティの表示

Chromium の問題: 1226262

Console の更新

コンソールで CORS エラーを非表示にするオプション

CORS エラーは、コンソールで非表示にできます。CORS エラーが [問題] タブに報告されるようになったため、コンソールで CORS エラーを非表示にすると、見やすくなりました。

コンソールで、設定アイコンをクリックし、[コンソールに CORS エラーを表示する] チェックボックスをオフにします。

コンソールで CORS エラーを非表示にするオプション

Chromium の問題: 1251176

コンソールでの適切な `Intl` オブジェクトのプレビューと評価

Intl オブジェクトが適切にプレビューされ、コンソールで積極的に評価されるようになりました。以前は、Intl オブジェクトは積極的に評価されませんでした。

コンソールでの Intl オブジェクト

Chromium の問題: 1073804

一貫性のある非同期スタックトレース

コンソールで、他の非同期タスクとの整合性およびコールスタックの表示内容と一致するよう、async 関数の async スタックトレースを報告するようになりました。

非同期スタックトレース

Chromium の問題: 1254259

コンソールサイドバーは引き続きご利用いただけます。Chrome 94 で、コンソールサイドバーの今後のサポート終了を発表し、デベロッパーの皆様からのフィードバックや懸念をお知らせしました。

サポート終了のお知らせから十分なフィードバックをいただいたため、このサイドバーは削除するのではなく、改善に取り組んでまいります。

コンソールのサイドバー

Chromium に関する問題: 1232937、1255586

[Application] パネルの非推奨の [Application cache] ペイン

Chrome やその他の Chromium ベースのブラウザで AppCache がサポートされなくなったため、[Application] パネルの [Application Cache] ペインを削除しました。

Chromium の問題: 1084190

[試験運用版] [アプリケーション] パネルの新しい Reporting API ペイン

Reporting API は、ページのセキュリティ違反やサポートが終了した API 呼び出しなどをモニタリングできるように設計されています。

このテストを有効にすると、[アプリケーション] パネルの新しい [Reporting API] ペインでレポートのステータスを確認できるようになりました。

なお、[エンドポイント] セクションは現在開発中です（現時点ではレポートエンドポイントは表示されません）。

Reporting API について詳しくは、こちらの記事をご覧ください。

[Application] パネルの [Reporting API] ペイン

Chromium の問題: 1205856

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

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

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

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

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