網頁元素檢查與取色擴充功能

使用前可以確認的事實

• 做什麼：點擊頁面元素查看類似 Figma 的屬性面板，並用取色器吸取頁面任意像素色。
• 頁面內容、選取的文字和生成結果預設只留在本機，不上傳到 KnowIt 伺服器。
• 免費，安裝擴充功能後即可使用。

查看全部常見問題

「元素檢查器」的設計理念

平時上網，看到喜歡的網站配色、好看的字體、舒服的間距，總想記下來留著用。可問題是，這些信息藏在網頁代碼裡，得打開瀏覽器自帶的開發者工具才能看到——那玩意兒功能太多，滿屏英文和數字，非程序員看了直接勸退。

這個工具就是為解決這個小麻煩做的。它的想法很簡單：不搞複雜的東西，只做好一件事。

一、把複雜的開發者工具，變成一個順手的小工具

瀏覽器自帶的檢查功能很強，但它是給開發人員準備的，面板裡堆滿了網絡請求、報錯信息、源碼調試這些普通人用不上的東西。這個工具把這些全砍掉了，只保留最常用的幾個功能：吸取顏色、查看字體大小、量一下間距、看看圓角是多少。界面乾乾淨淨，打開就能用，鼠標挪到哪兒就顯示哪兒的信息，不用學，也不用記快捷鍵。

二、裝上就能上手，不用動腦子

不用註冊賬號，不用看說明書，不用配置任何東西。裝好之後，在任意網頁上點一下圖標，鼠標在頁面上移動，所有樣式信息直接顯示在屏幕上——顏色直接給色值，元素自動高亮邊框。整個過程跟截圖一樣直觀，沒有任何技術門檻，誰拿過來都會用。

三、以後不止能取色，還能把整套風格一鍵打包帶走

現在的版本已經可以一個個地取顏色、看字體了。但後面還會繼續升級，最終想讓它在一次操作裡，自動把整個網頁用到的所有顏色、字體、間距、圓角都識別出來，整理成一份清晰的信息卡片。看到一個喜歡的頁面，點一下就能把它的整套視覺風格帶走來用。從「摳一個顏色」變成「打包一整套風格」，這才是這個東西真正想做到的樣子。

剛起步，功能還不算強大，有些地方的識別可能還不夠準。但方向是清楚的——做一個設計師拿起就能用、用著順手、而且會越來越好的小工具。