網頁樣式吸管：快速查看文字與區塊樣式，即時編輯修改

　　相信有在做網頁的朋友都知道，看到喜歡的文字樣式或版面，只要開啟瀏覽器的「開發人員工具」，就能查看它用了什麼字型、字級、顏色，以及區塊的相關設定，就連藏在背景裡的圖片，也能找得到。不過，有用過的朋友應該都有遇過，當網頁的結構一層包一層時，光是要找到眼前那段文字或區塊，就得在程式碼裡點來點去，有時找得比改得還久。

　　因此，前陣子梅干就想，能不能滑鼠點一下，就直接看到這些資訊？於是便透過 AI 的協助，開發了這隻 Chrome 擴充外掛「網頁樣式吸管」。只要選取網頁上的文字或區塊，就能快速查看字型、字級、行高、字距、顏色等資訊，甚至還能直接修改文字、調整樣式，看看改完的效果。對於平常會研究網頁版型，或想試試不同文字設定的朋友，就方便許多啦！

---

網頁樣式吸管

---

網頁樣式吸管使用教學

Step1：安裝網頁樣式吸管

首先，進入 Chrome 線上應用程式商店，將「網頁樣式吸管」加入 Chrome，安裝完成後就可以開始使用啦！

---

Step2：開始吸取樣式

接著開啟想要查看樣式的網頁，點一下瀏覽器右上角的「網頁樣式吸管」圖示，再按下「開始吸取樣式」。

---

Step3：滑鼠移過去就能查看樣式

這時只要將滑鼠移到想查看的文字或區塊上，就會出現紫色的選取框，同時顯示字型、字級、行高、字距、顏色，以及區塊尺寸、內外距等資訊，不用再到開發人員工具裡一層一層找囉！

---

Step4：點一下固定面板，直接修改樣式

找到要調整的文字或區塊後，點一下就能固定面板，接著便可直接修改字級、行高、字距、文字顏色或區塊底色，邊調整邊看效果。若想回到原本的設定，按下該項目旁的「還原」就可以啦！

---

　　有了「網頁樣式吸管」，以後看到喜歡的文字樣式或區塊，就不用再打開開發人員工具，一層一層慢慢找。滑鼠移過去就能查看，點一下還能直接調整，對於網頁從業人員，應該能省下不少時間，也趕快來裝起來，如操作上有任何建議也歡迎告知。