DevTools の新機能（Chrome 96）

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

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

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

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

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

Chromium の問題: 1254557

CSS の長さの編集とコピーを復元し、改善しました

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

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

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

この機能を無効にするには、[設定] > [試験運用版] > [スタイルペインで CSS 長さ作成ツールを有効にする] チェックボックスをオフにします。

Chromium の問題: 1259088、1172993

タブの更新

CSS の prefers-contrast メディア特性をエミュレートする

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

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

Chromium の問題: 1139777

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

DevTools を使用して自動ダークモードをエミュレートすると、Chrome の自動ダークモードが有効になっているときのページの外観を簡単に確認できます。

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

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

Chromium の問題: 1243309

スタイルペインで宣言を JavaScript としてコピーする

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

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

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

Chromium の問題: 1253635

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

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

Chromium の問題: 1214030

[プロパティ] ペインでのプロパティの表示を改善しました

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

Chrome 95 の [プロパティ] ペインの機能強化により、関連するプロパティを簡単に見つけられるようになりました。

Chromium の問題: 1226262

Console の更新

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

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

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

Chromium の問題: 1251176

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

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

Chromium の問題: 1073804

一貫した非同期スタック トレース

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

Chromium の問題: 1254259

コンソールのサイドバーを維持する

コンソールのサイドバーは今後も使用できます。Chrome 94 では、コンソール サイドバーのサポート終了を発表し、デベロッパーにフィードバックや懸念事項をお願いしています。

非推奨に関するお知らせから十分なフィードバックが寄せられたため、サイドバーを削除するのではなく、改善に取り組むことになりました。

Chromium の問題: 1232937、1255586

アプリケーション パネルの非推奨の [アプリケーション キャッシュ] ペイン

Chrome と他の Chromium ベースのブラウザから AppCache のサポートが削除されたため、[アプリケーション] パネルの [アプリケーション キャッシュ] ペインが削除されました。

Chromium の問題: 1084190

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

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

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

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

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

Chromium の問題: 1205856

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

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

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

次のオプションを使用して、DevTools の新機能、更新、その他のトピックについて話し合います。

• フィードバックや機能リクエストは crbug.com から送信してください。
• DevTools の [more_vert] > [その他のオプション] > [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。