NoF12 Frontend Fast Check

A Chrome extension to visualize CSS spacing (margin, padding, gap) on web pages.

不用開啟 F12，即可在網頁上以色塊與數值查看 CSS margin、padding 與 gap，協助快速檢查版面間距。 NoF12 Frontend Fast Check 是為前端工程師、網頁設計師與版面驗收人員打造的 CSS 間距檢查工具。無需開啟開發者工具，即可直接在目前網頁上顯示間距色塊與數值，協助你檢查留白、比對設計稿，找出版面間距不一致的位置。 【主要功能】 • 三色辨識 CSS 間距 以橘色標示 margin（外距）、綠色標示 padding（內距）、藍色標示 Flexbox 與 Grid 容器的 gap（元素間距），並搭配數值標籤，方便快速閱讀。 • 四種顯示模式 提供 All、Margin、Padding、Gap 模式。可以一次查看三種間距，也可以只顯示目前需要檢查的類型。 • 一鍵開啟與關閉 點擊擴充功能圖示，透過操作面板啟用或關閉標示，並切換顯示模式。 • 捲動與視窗縮放時更新 當頁面捲動或瀏覽器視窗大小改變時，重新繪製目前可視範圍內的間距標示，方便檢查不同位置與視窗尺寸下的版面。 • 保留網頁操作 間距色塊不攔截滑鼠操作，開啟標示後仍可點擊網頁上的連結與按鈕。 【適合使用的情境】 • 前端切版時檢查元素內外距。 • 比對設計稿與實際網頁的留白。 • 檢視 Flexbox、Grid 版面的間距設定。 • 驗收頁面時找出間距不一致的位置。 • 學習 CSS 時理解 margin、padding 與 gap 的差異。 【使用方式】 1. 開啟要檢查的網頁。 2. 點擊 NoF12 Frontend Fast Check 擴充功能圖示。 3. 點擊啟用按鈕，顯示間距標示。 4. 選擇 All、Margin、Padding 或 Gap 模式，或使用快捷鍵 ALT+SHIFT+G來 開啟 5. 檢查完成後，再次點擊按鈕關閉。 【資料與隱私】 間距分析與標示皆在本機瀏覽器內完成。本擴充功能不會將網頁內容或分析結果傳送至外部伺服器，不含追蹤或分析服務，也不需要註冊帳號。 【使用注意】 間距標示依據網頁的 CSS 計算樣式與元素位置繪製，數值取整數，適合用於快速視覺檢查。複雜排版下的標示可能與實際留白有所差異。 Chrome 內部頁面與其他限制擴充功能執行的頁面無法使用。