Chrome DevTools 之顏色提取神器 Eye Dropper

想立即獲取頁面中某個元素的顏色？其實不需要任何第三方工具或 Chrome 擴展，Chrome 自帶的 Eye Dropper 就夠了。Web 開發者使用 Chrome 元素審查(Elements Inspect)的時候會看到該元素所應用的 CSS 樣式，其中表示 CSS 顏色樣式的旁邊有一個小方塊，點擊這個小方塊就會彈出顏色提取器 Eye Dropper 。

在彈出 Eye Dropper 的時候，你不僅僅可以直接用它設置顏色，你還可以把鼠標移到網頁中，這時 Eye Dropper 就會實時顯示當前元素的顏色，點擊則立即將當前元素顏色應用到該 CSS 的顏色設置中，如果不合適可以按 ESC 取消。

順便說一下，按住 Shift 的同時用鼠標點擊這個小方塊可以在各種 CSS 顏色單位之間前后，如 RGB 和 HSL 。

作者：韓國愷。本系列文章以 Addy & Matt 的系列視頻  Totally Tooling Tips 的內容為基礎重新整理而成，主要介紹一些(前端)開發者喜歡的工具和技巧。

Post Views: 1

除非特別聲明，此文章內容采用 知識共享署名 3.0 許可，代碼示例采用 Apache 2.0 許可。更多細節請查看我們的 服務條款 。