DevTools の新機能（Chrome 96）

Jecelyn Yeen

プレビュー機能: 新しい「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 での自動ダークモードのオリジン トライアルが導入されます。この機能により、ユーザーがオペレーティング システムでダークモードを選択している場合、ブラウザは自動生成されたダークモードをライトモードのサイトに適用します。

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

Chromium の問題: 1243309

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

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

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

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

Chromium の問題: 1253635

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

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

Chromium の問題: 1214030

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

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

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

Chromium の問題: 1226262

Console の更新

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

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

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

Chromium の問題: 1251176

コンソールでの適切な 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 について詳しくは、こちらの記事をご覧ください。

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 の新機能シリーズで取り上げたすべての内容のリスト。