Chrome Devtools 新測試功能 CSS Overview

這是一個 chrome devtools 的新的實驗功能,看起來蠻有趣的,所以來分享一下開啟的方法以及功能介面。
blog.image

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 應該也是在一個規範內,各位前端們可以用這頁面去跟設計師們好好溝通了。

類似文章

record.image

Engineering

Nuxt Content 的 Theme - doc 使用心得

用 Nuxt Content 快速搭建的網站越來越多,而官方也推出了第一套 theme,doc 模板可以使用,讓你可以快速的建構 doc 網站。

author.image

3 min

record.image

Blog

恭喜這個部落格的 code 被封存到北極了 GitHub Archive Program

今天查看自己的 github 頁面時,赫然發現個 highlight - Arctic Code Vault Contributor,接下來就來簡單講解這是什麼吧。

author.image

2 min