Screen Ruler

什麼是 Screen Ruler？

Screen Ruler 是一款 Chrome 擴充功能，用於檢視與測量網頁。它可協助設計師與開發者直接在瀏覽器中檢查元素尺寸、間距、選擇器、computed CSS、色彩、截圖、無障礙對比問題，以及與 SEO 相關的中繼資料。

此擴充功能可透過工具列圖示、右鍵內容選單或鍵盤快捷鍵啟用。啟用後，它會在頁面上疊加檢視工具，讓使用者將游標移到元素上或點擊元素，以檢查版面與頁面中繼資料，而無需離開網站。

主要功能

• 測量元素大小與間距：查看像素尺寸、margin、padding，以及元素之間的距離。
• 檢視元素識別資訊：在懸停或選取時顯示標籤名稱、ID 與 class 名稱。
• 查看並複製 computed CSS：在側邊面板中檢視目前元素的 computed styles，並將 CSS 複製到剪貼簿。
• 使用尺規與取色器：放置水平與垂直輔助線以進行精確測量，並從頁面任一位置取樣色彩。
• 擷取所選內容：使用鍵盤快捷鍵對選取的元素進行裁切截圖。
• 檢查頁面品質訊號：偵測 WCAG 對比問題、常見 SEO 問題、meta 標籤，以及 Facebook、X 和 LinkedIn 的社群預覽資料。

如何使用 Screen Ruler

安裝擴充功能後，可從工具列圖示、內容選單或快捷鍵 Alt/Option + Shift + R 開啟。將游標移到元素上即可檢視其尺寸與中繼資料，或點擊元素將其選取，並與附近內容進行比較。

從側邊面板中，您可以檢視並複製 computed CSS、使用父/子選取快捷鍵、檢查尺規與色彩，以及使用截圖、meta 標籤和頁面分析工具。此擴充功能也支援透過 Chrome 擴充功能設定自訂快捷鍵。

使用情境

• 在將工作交付工程團隊前，檢查 landing page 或介面 mockup 的間距與對齊。
• 在前端除錯時，找出元素的精確 CSS class、ID 與 computed styles。
• 從設計參考或實際頁面取樣色彩，以符合視覺系統。
• 擷取單一元件的裁切截圖，用於文件或錯誤回報。
• 在發布前檢查頁面是否缺少 SEO 中繼資料、是否有多個 H1，或是否存在對比問題。

常見問題

Screen Ruler 可在任何網站上使用嗎？ 列表說明它可用於任何網頁。

要如何啟用此擴充功能？ 可從擴充功能圖示、右鍵內容選單，或鍵盤快捷鍵 Alt/Option + Shift + R 開啟。

可以從元素複製 CSS 嗎？ 可以。側邊面板包含 computed CSS 檢視與「Copy CSS」按鈕。

它除了檢視之外，還有更進階的工具嗎？ 有。列表也提到截圖、取色、無障礙檢查、SEO 分析，以及社群預覽檢視。其中部分額外功能屬於 PRO 等級。

替代方案

• 瀏覽器開發者工具：適合直接檢視與除錯，尤其是在 Chrome 內建面板中工作，而非使用疊加式擴充功能時。
• 其他瀏覽器檢視擴充功能：類似工具可能更專注於測量、尺規、CSS 檢視或取色。
• 設計交付與 QA 工具：當團隊需要更廣泛的視覺審查流程，而非瀏覽器內元素檢視時，更為適合。
• 無障礙與 SEO 稽核工具：若主要目標是稽核工作流程，而非即時頁面檢視，這類工具可能提供更深入的問題報告。