✏️ 原創內容| TechRitual 編輯部
網頁設計師和開發者在調整版面時，常常需要精準測量元素寬度、高度與間距，但瀏覽器原生的開發工具操作步驟較多，容易打斷設計流程。Screen Ruler 作為 Chrome 擴充功能，透過簡單的滑鼠操作即可快速取得像素級數據，讓使用者無需切換視窗即可完成測量工作。
測量工具支援像素精準讀取與即時反饋
使用者啟用擴充後，只需在頁面上拖曳即可顯示水平與垂直尺規，同時畫面會即時顯示所選區域的寬度、高度與座標值。這種設計讓設計師在微調邊距或對齊元素時，能夠直接參考像素數據，而不用再手動計算或截圖後量測。
快速擷取元素 CSS 屬性與顏色數值
除了尺寸測量，Screen Ruler 還能直接讀取頁面元素目前的 CSS 樣式，包括字型大小、邊距、顏色代碼等。設計師在需要複製或對照既有樣式時，只要點選目標元素，相關數值就會顯示在浮動面板上，讓後續調整或文件整理工作更順暢。
一鍵截圖功能保留完整測量畫面
當使用者完成測量或樣式檢視後，可以透過擴充內建的截圖按鈕，將目前畫面連同尺規與數值一併保存。這種做法讓團隊成員在討論版面細節時，能夠直接參考帶有測量標示的畫面，而無需重新開啟開發工具或重複操作。
隱私保護機制確保使用者資料安全
根據 Chrome 線上應用程式商店的說明，Screen Ruler 僅在使用者主動使用時才會讀取頁面內容，並不收集個人資料或上傳任何資訊到伺服器。這種設計讓使用者在處理內部專案或敏感頁面時，仍能安心使用測量工具。
產品名稱：Screen Ruler – Measure and Inspect the Web
官方網站：https://chromewebstore.google.com/detail/screen-ruler-measure-the/jfbbgijjljfbolelfkopkhbfjajjampm
支援平台：Chrome
