Web開発で知っておきたいChromeデベロッパー・ツールの機能(Chrome90 での新機能)
2021.04.18 Chrome
Google Chrome 90で追加されたDevToolsの機能をまとめました。CSS flexboxの直感的な操作、Core Web Vitalsの表示、Color Palettes、Trust Tokenの確認、color-gamutの設定、Accessibility Treeの表示などです。
Chrome90にて追加された機能（CSS flexbox）
chrome90ではdevtoolにてCSSのflexboxの設定を直感的に操作することが可能になりました。display: flex が指定されている要素の横にflexボタンが表示され、クリックすると画面上のflexが当たっている要素に枠組みが表示されます。Stylesタブから配置の選択も行えます。
Core Web Vitalsの表示
Core Web Vitalsとは読み込み時間（LCP）、インタラクティブ性（FID）、ページ・コンテンツの視覚的安定性（CLS）などのUX指標です。Run commandから「show rendering」を検索し、RenderingメニューでCore Web Vitalsにチェックすると画面右上にLCP・FID・CLSの値が表示されます。
Color Palettes
CSSの設定をdevtoolから変更する際にColor Palettesから色を選択できるようになりました。カラーコードの左横をクリックすると色の選択が表示され、Material ColorやPage Colorの選択肢も利用できます。
その他の変更点
ApplicationタブでTrust Tokenを確認可能。RenderingタブでEmulate CSS media feature color-gamutの設定が可能。Experimentsで「Enable full accessibility tree view in Elements pane」にチェックすると、DOM TreeとAccessibility Treeをトグルで切り替えられます。consoleでダブルクオーテーションがエスケープされるように変更、devtool使用時のページ読み込みスピードが向上、fn.displayNameがfn.nameに変更されました。