當網頁設計師或前端工程師在 Chrome 裡反覆切換 DevTools，只為量度幾個像素或抓取某個顏色值，效率往往大打折扣。Screen Ruler 正是針對這類痛點而生，讓使用者無需離開瀏覽器視窗，即可直接在頁面疊加尺規、讀取 CSS 屬性及擷取顏色資訊。
在頁面直接量度元素與間距
開啟擴充後，滑鼠游標會自動變成十字線，點擊即可在任意 DOM 元素上產生可拖曳的量尺。使用者能即時看到寬、高、內外邊距及兩點之間的精確像素距離，無須再手動計算。
一鍵提取 CSS 規則與顏色值
除了量度尺寸，擴充亦可直接讀取所選元素的完整 CSS 屬性，包括字體、邊框及定位資訊。點擊顏色吸管工具即可將當前色值轉換為 HEX、RGB 或 HSL 格式，方便複製到設計稿或程式碼中。
快速截取頁面畫面與區域
使用者可透過工具列按鈕或鍵盤快捷鍵，即時擷取整個頁面或指定區域的畫面。截圖會自動開啟新分頁，方便後續標註或直接下載，省去另行安裝截圖外掛的步驟。
輕量安裝與即時更新
Screen Ruler 僅 200 KB 左右，安裝後無需重啟即可生效。開發者會定期推送更新，確保相容最新版 Chrome 及常見框架。所有資料處理均在本地進行，不會上傳至外部伺服器。
產品名稱：Screen Ruler – Measure and Inspect the Web
官方網站：https://chromewebstore.google.com/detail/screen-ruler-measure-the/jfbbgijjljfbolelfkopkhbfjajjampm
