Pixel Ruler

用 Pixel Ruler 在任何網頁上量測像素:螢幕尺規,隨時查看元素尺寸、間距與內距。

Pixel Ruler 在螢幕上放一把尺規，讓你量得出瀏覽器裡的任何東西。點一下工具列上的圖示，按住滑鼠在版面上拖曳，就能讀到以 CSS 畫素為單位的精確距離。游標停在某個元素上，它的寬度、高度、內距，以及與周圍區塊之間的間距都會跑出來。數字和 DevTools 對得起來，因為這個擴充功能讀的就是瀏覽器繪製網頁時所用的那組 CSS 畫素。 不必開面板，不必匯出螢幕截圖，也不必自己加減。就是在你正在看的網站上面，多了一把螢幕尺規。 單一圖層，不用來回切換： 📏 按住拖曳，量出網頁上任意兩點之間的距離。 📏 指到某個元素，看它的尺寸、內距，以及到鄰近元素的距離。 📏 拉出垂直與水平的參考線，讓區塊對齊上去。 螢幕上隨時有一把尺規可以對照，按一個鍵就能把測量結果連同游標底下元素的 CSS 選取器一起複製到剪貼簿。 三個步驟開始用： 1. 安裝擴充功能，並把它釘在工具列上。 2. 開啟你正在處理的網頁，點一下圖示。 3. 拖曳、指、量 —— 做完按兩次 Esc。 前端工程師用它把版面和設計稿核對一遍。設計師在交付檔案早就過時的時候，把它當成網頁尺規。測試工程師回報問題時直接給出真實數字，而不是一句「按鈕好像偏低」。任何人想在線上網頁快速量個畫素，兩下點擊就有答案。 這把網頁尺規會給你： - 任意兩點之間的距離，以畫素計 - 網頁上任何元素的寬度與高度 - 內距、外距，以及相鄰元素之間的間距 - 某個元素到周圍區塊的距離 - 視窗上緣與左緣的刻度尺 - 你所量元素的標籤、class 與 CSS 選取器 - 可重複使用的參考線，用來檢查對齊 鍵盤操作讓游標穩住不跑： → Shift 把測量鎖在水平或垂直軸上 → 方向鍵把目前的點精準移動 1 px → Esc 清掉目前的測量，再按一次 Esc 把網頁還給你 → 一組快速鍵就能把結果複製到剪貼簿 裝一次就好：Windows、Linux 與 ChromeOS 使用者跑的是這把畫素尺規，Mac 使用者跑的也是同一把畫素尺規，因為這個工具住在瀏覽器裡，不在作業系統裡。沒有畫素尺規安裝檔要到處找，沒有安裝程式，也不需要系統管理員權限：擴充功能從 Chrome Web Store 一鍵就到手。上架階段它是一把免費的畫素尺規，每個功能都對所有人開放。 另外開一個視窗的螢幕尺規程式，網頁一捲動，量到的就不是原來的位置了。這把畫素尺規畫在分頁內部，跟著內容一起捲動。 這是一把線上畫素尺規：線上網頁、staging 伺服器、客戶的網站、登入後才看得到的頁面，它都能用。只能量視窗靜態截圖的桌面畫素尺規做不到。要核對一張插圖或標誌？把它當成圖片用的畫素尺規 —— 指到圖片就能讀出實際算繪出來的尺寸，那通常和原始檔裡的尺寸不一樣。 問題與解答 問：不開 DevTools，要怎麼量螢幕上的畫素？ 答：點一下圖示然後拖曳。這層覆蓋在網頁上方，所以你量到的就是你真正看到的畫面，包括面板一搶走焦點就消失的 hover 狀態。 問：螢幕畫素尺規、像素尺規、量尺工具、screen ruler、px ruler、pixelruler —— 這是哪一個？ 答：全都是。工具是同一個，換的只是搜尋的字詞。 問：可以用公分或英吋量嗎？ 答：不行。它是一款畫素尺規工具，只回報 CSS 畫素，也就是你寫在樣式表裡的那個單位。 問：到處都能用嗎？ 答：一般網站沒問題。Chrome 的系統頁面、內建的 PDF 檢視器，以及跨來源 iframe 的內部，對所有擴充功能都是關起來的，這一個也一樣。 問：它會蒐集什麼資料？ 答：什麼都不蒐集。零網路要求、不用帳號、不用註冊。安裝時不會要什麼嚇人的權限，而且要等你點了圖示，它才會碰到網頁。 老方法又慢又不準：拿塑膠尺貼著電腦螢幕玻璃比，或是在螢幕截圖裡一個一個數畫素。用在電腦螢幕上的尺規，必須住在瀏覽器裡、在版面重排時重新畫過，而且和程式碼講同一種單位。這層螢幕覆蓋做的就是這件事，這也是網站畫素尺規勝過把截圖貼進繪圖軟體再拉尺規的原因。 這份說明有 52 種語言，所以不管你用哪一種語言，網頁畫素尺規都只差一次搜尋。裝起來，在你開的下一個頁面量量看畫素，接下來一整天都讓這把螢幕尺規保持在一鍵之內。