Chrome Devtools 新測試功能 CSS Overview
2020-08-04
Tool
1 MIN

CSS Overview

CSS Overview 這是一個 chrome devtools 的實驗功能,可以從裡面看到整個網站中,使用的背景顏色、文字顏色、邊框顏色以及字型種類、字型大小等等 甚至還有 media query 的總數。

開啟實驗功能

因為他目前還是實驗功能,所以預設是看不到的,必須到設定中去開啟它:

  • 打開 devtools

  • 打開 devtools 的 settings

  • 點選 experiments 分頁

  • 開啟 CSS Overview

cssover-view-1

當設置開啟以後,就可以在 devtools 的分頁中看到多了一項 CSS Overview (沒看到的話 重開 devtools),點擊 Capture overview 按鈕就可以看到整個網站的 css 概覽啦。

cssover-view-2

理論上一個網站的背景顏色、文字顏色等等風格應該要一致,並且文字字型種類不應該太多,然後 media query 應該也是在一個規範內,各位前端們可以用這頁面去跟設計師們好好溝通了。

Copyright © 2020-2022 | Design by Waiting7777