DevTools の新機能（Chrome 96）

Jecelyn Yeen

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

新しい [CSS の概要] パネルを使用して、ページの CSS の潜在的な改善点を特定します。[CSS の概要] パネルを開き、[概要をキャプチャ] をクリックして、ページの CSS のレポートを生成します。

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

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

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

CSS の概要パネル

Chromium の問題: 1254557

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

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

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

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

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

Chromium の問題: 1259088、1172993

レンダリング タブの更新

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

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

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

コマンド メニューを開き、[レンダリングを表示] コマンドを実行して、[CSS メディア特性 prefers-contrast をエミュレート] プルダウンを設定します。

Chromium の問題: 1139777

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

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

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

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

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

Chromium の問題: 1243309

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

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

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

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

宣言を JavaScript としてコピー

Chromium の問題: 1253635

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

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

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

Chromium の問題: 1214030

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

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

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

[プロパティ] ペインにプロパティが表示される

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

[アプリケーション] パネルのサポートが終了した [アプリケーション キャッシュ] ペイン

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

Chromium の問題: 1084190

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

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

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

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

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

[アプリケーション] パネルの [Reporting API] ペイン

Chromium の問題: 1205856

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

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

Chrome DevTools チームに問い合わせる

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

DevTools の新機能

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