提升效率！Screen Ruler 網頁尺規工具：前端開發者必備的 Chrome 擴充功能

Screen Ruler 是螢幕上的尺，用以測量網頁上任何元素的標籤名稱、ID、尺寸、距離、邊框間距和邊界等資訊，而且操作上很簡單，只要開啟擴充功能後將游標移動到元素就會即時顯示出相關數據，點選還能在側邊欄顯示 CSS 和容器名稱，雖然使用 Chrome 瀏覽器的開發人員工具也可以做到類似的效果，但在這個擴充功能中表現得更好，很適合開發人員和設計師使用。

免費版功能介紹

不過 Screen Ruler 免費版只有提供基本功能，包括測量任何元素的像素大小、測量兩個元素的距離、查看 HTML 標籤名稱、類別名稱和 ID，也有快速切換父元素子元素的「CSS 選擇器」，適用於任何類型的網頁，即使遇到響應式網頁設計也可以隨著視窗大小而調整。

升級 PRO 版開啟完整功能

付費升級為 Screen Ruler PRO 就能將完整、強大功能全部開啟，例如在浮動游標狀態快速檢查每個元素的屬性資訊，也能加入網格來驗證頁面設計的對齊情形，還能在選取特定區域時進行擷圖等等，付費價格是 $20 美元（一次性支付可永久使用），有沒有需要就自行評估囉！

免費下載 Screen Ruler 擴充功能
Chrome 線上應用程式商店

使用教學

STEP 1

首先從 Chrome 應用程式商店頁面將 Screen Ruler 安裝到瀏覽器。

STEP 2

接著點選右上角工具列 Screen Ruler 按鈕啟動，將游標移動到網頁上就會顯示每個元素的位置、HTML 和距離像素等資訊，主要功能側邊欄要從下方的按鈕點選顯示（如下圖箭頭表示位置）。

下方功能選單從左到右分別是快速切換父元素、子元素、顯示側邊欄和開啟關閉功能，最右側也會看到有升級為 PRO 版本的按鈕。

開啟側邊欄後就能看到特定元素的 HTML 類型、CSS 樣式和文字內容。

點選元素後移動游標，還會看到不同元素間的像素距離，Screen Ruler 免費版功能不多，如果有查看介紹的話會發現大部分功能都要付費升級才能開啟。

STEP 3

透過擴充功能的升級按鈕會看到 Screen Ruler PRO 功能介紹，包括有進階屬性、檢查元素、點選可快速下載 SVG、顏色、擷圖和佈局網格等功能，升級價格是 $20 美元，有沒有需求就看個人了，升級付費時只有提供信用卡支付選項，升級後可永久使用及更新，沒有其他限制。