CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
測量任何網頁上像素完美的距離和網格。
Image from store
Description from store
像素精度是偉大設計的默默英雄。即使只是像素的錯位，都可能破壞網格的韻律，使文字顯得偏離中心，甚至導致整個組件看起來「幾乎正確」卻又不完全正確。 Grid Ruler Lite 為前端開發者、UI/UX 設計師、QA 測試人員以及所有註重視覺美感的人士提供了一個即時的瀏覽器內測量工具包——無需繁瑣的設計軟體，無需雜亂的 DevTools 面板，也無需將屏幕截圖拖放到外部應用中。只需單擊一下，該擴充功能就會在任何網頁上疊加一個可調整大小的標尺、對齊網格參考線和可選的基線網格，以便您在幾秒鐘內檢查間距、驗證 8 點網格並捕獲佈局錯誤的證據。
Grid Ruler Lite 有何突出之處？
一鍵激活，一鍵關閉
點擊工具列圖示（或呼叫您在瀏覽器鍵盤設定中設定的捷徑），擴充功能就會注入一個輕量級<canvas>疊加層封裝在其自身的 Shadow-DOM 中。頁面的 CSS 不會幹擾疊加層，疊加層永遠不會改變您正在測試的 DOM 樹。再次點擊後，所有參考線、網格和標籤都會消失——無需重新載入頁面，也無需監聽任何殘留事件。
為什麼你需要它在你的工具包中
節省時間：在 DevTools 中測量內邊距需要深入巢狀框，並在腦海中計算邊框和邊距值。 Grid Ruler Lite 只需拖曳一次即可直觀地顯示距離。
減少錯誤：在進入準備階段或更糟的生產階段之前捕捉微小的間距回歸 - 特別是在 QA 眼睛並不總是能注意到的反應斷點中。
改善協作：設計師可以將 8 點網格直接疊加在已部署的建置上並共享螢幕截圖，從而無需 Figma 評論即可為開發人員提供精確的像素回饋。
保持專注：無需為了測量按鈕而按住 Alt 鍵進入 Photoshop 或開啟 Sketch 檔案。所有操作均在即時頁面上進行，與最終用戶看到的完全一致。
教育和文件：產品經理和技術作家可以使用標尺螢幕截圖來示範佈局行為，使所有利害關係人更清楚地了解規範文件。
目標使用者群體
使用者群組
前端開發者
需要驗證 CSS 間距、彈性框間隙和跨斷點的元件對齊，拖曳標尺、對齊邊緣、鎖定參考線、匯出螢幕截圖以供 PR 審核
UI/UX設計師
必須確認開發人員建構遵循 8 點或 10 點設計系統，覆蓋基線網格、測量填充、共享註釋的 PNG
QA 測試人員
報告像素級錯誤並提供明確證據
快速測量和一鍵截圖直接進入錯誤追蹤器
內容編輯和專案經理
檢查 CMS 驅動頁面上的標題換行、廣告位間距和卡片佈局，非技術性覆蓋可避免 DevTools 的複雜性
教育工作者和學生
在瀏覽器中即時教授設計原則、網格理論和響應式佈局，無需外部工具即可進行視覺化即時演示