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

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 メディア特性をエミュレートする

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

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

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

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

Chromium の問題: 1214030

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

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

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

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

Chromium の問題: 1226262

Console の更新

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

コンソールで CORS エラーを非表示にできます。CORS エラーが [問題] タブに報告されるようになったため、[コンソール] で CORS エラーを非表示にすると、雑然とした状態を解消できます。

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

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

Chromium の問題: 1251176

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

Intl オブジェクトのプレビューが適切に表示されるようになり、コンソールで即座に評価されるようになりました。以前は、Intl オブジェクトは遅延評価されていました。

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

Chromium の問題: 1073804

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

Console で 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 の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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