DevTools の新機能（Chrome 96）

Jecelyn Yeen

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

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

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

[CSS の概要] パネルはプレビュー機能です。現在、担当チームがこの機能の改善に取り組んでおります。さらなる機能改善のため、皆様からのフィードバックをお待ちしています。

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

CSS の概要パネル

Chromium の問題: 1254557

CSS の長さを編集、コピーする際の操作性を復元、改善

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

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

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

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

Chromium の問題: 1259088、1172993

タブの更新

CSS Preferreds-contrast メディア機能をエミュレートする

CSS Preferreds-contrast メディア機能をエミュレートする

優先コントラストのメディア機能は、ユーザーがページのコントラストの調整をリクエストしたかどうかを検出するために使用されます。

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

Chromium の問題: 1139777

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

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

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

コマンド メニューを開き、[Show Rendering] コマンドを実行してから、[Emulate auto ダークモード] プルダウンを設定します。

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

Chromium の問題: 1243309

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

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

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

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

JavaScript として宣言をコピー

Chromium の問題: 1253635

[ネットワーク] パネルの [新しいペイロード] タブ

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

[ネットワーク] パネルの [ペイロード] タブ

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 のサポートが削除されたため、[アプリケーション] パネルの [アプリケーション キャッシュ] ペインが削除されました。

Chromium の問題: 1084190

[試験運用版] [Application] パネルの新しい 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 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。