What's New In DevTools (Chrome 96) | Blog | Chrome for Developers

Preview feature: New CSS Overview panel Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS. You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element

[efcl]

Chrome96の開発者ツールの変更点について。 CSS Overviewパネルの追加、`prefers-contrast`とAuto Dark Themeのエミュレート機能の追加。 NetworkパネルにPayloadタブの追加、試験的にReporting APIパネルを追加など

[diveintounlimit]

これだけ年がたってもまだまだ進化するのが凄い

[clubman023]

北井

[fuyu77]

面白そう。"新しい CSS Overview パネルを使用するとあなたのページの CSS を改善できる可能性を確認できます"

[IGA-OS]

使ってみましょうかね

[yamadar]

CSS Overview 良さそう

[mohri]

CSS Overvie使ってみよう

[Shisama]

background-colorにどんな色が使われているかや使われていない定義を表示するCSS Overviewパネルがstableに。prefers-contrastやdark themeのエミュレーションが可能に。ネットワークパネルのpayloadタブも地味に便利そう。