Page Ruler adds Photoshop-style rulers and draggable guide lines to any webpage. Pixel-accurate rulers run along the top and left edges of the viewport, and you can drag guide lines onto the page to measure distances, check alignment, and verify spacing — all directly on the live page.
Designers working in Figma or Photoshop rely on rulers and guides to check spacing and alignment. But when those designs are implemented in HTML/CSS, verifying pixel accuracy typically means opening DevTools, hovering elements one by one, and comparing computed values against the mockup. Page Ruler brings the familiar ruler-and-guide workflow directly to the browser. A horizontal ruler with tick marks spans the top of the viewport, and a vertical ruler spans the left edge — both showing pixel positions. Click and drag from either ruler to pull a guide line onto the page. Guides are color-coded (blue for horizontal, red for vertical) and show their pixel position. The distance between any two parallel guides is automatically calculated and displayed. Drag guides to reposition them, or double-click to remove. The entire overlay is non-intrusive — it sits on top of the page without affecting layout or interactions.
Precise rulers with tick marks at every 50 pixels run along the top and left edges of the viewport. The rulers scroll with the page and show accurate pixel positions relative to the page origin (0,0). Tick marks at 10px intervals with labels at every 50px.
Click and drag from the horizontal ruler to create a horizontal guide, or from the vertical ruler for a vertical guide. Guides snap to the cursor position and show their exact pixel coordinate (e.g., y: 200px). Drag to reposition, double-click to remove.
When two parallel guides are placed, the pixel distance between them is automatically calculated and displayed with a connecting bracket and label. Place two horizontal guides 120px apart and see "120px" labeled between them.
Horizontal guides are blue, vertical guides are red — making it easy to distinguish them at a glance when multiple guides are placed. Each guide shows its position in a small label badge.
Rulers and guides are rendered as a transparent overlay that doesn't affect the page's DOM, layout, or JavaScript. You can still click through to interact with page elements. The overlay only captures clicks on the rulers and guide handles.
Place as many guides as you need — there's no limit. Create a complete measurement grid with horizontal and vertical guides marking every significant alignment point on the page.
The mockup says the header is 80px tall and the content starts at 120px from the top. Place horizontal guides at those positions and instantly verify whether the implemented page matches the design specifications.
Place guides at the top and bottom of repeated elements (cards, list items, sections) to verify they all have identical spacing. Inconsistent gaps between items become immediately obvious.
Place a vertical guide at a heading's left edge, then check if the paragraph text, buttons, and images below align to the same line. Misalignments of even a few pixels are visible against the guide.
Place two vertical guides at an element's left and right edges to measure its width. Place two horizontal guides for height. The auto-calculated distance gives you the exact pixel dimensions.
Place a vertical guide at common breakpoint widths (768px, 1024px, 1280px) and resize the browser to check whether elements reflow correctly at each breakpoint. The guides stay fixed as visual reference points.
Open the DevSuite Pro floating dock and click the Page Ruler icon. Pixel-accurate rulers appear along the top and left edges of the viewport.
Click and drag from the top ruler to place a horizontal guide line, or from the left ruler for a vertical guide. The guide follows your cursor and snaps to the pixel position where you release.
Each guide shows its pixel position (e.g., y: 200px). When two parallel guides are placed, the distance between them is automatically displayed with a labeled bracket.
Drag any guide to move it to a new position — the distance labels update in real-time. Double-click a guide to remove it from the page.
Click the Page Ruler icon again to hide all rulers and guides. Your guide positions are preserved if you reactivate during the same session.
Installeer DevSuite Pro gratis en ontgrendel 39+ ontwikkelaarstools voor uw browser.
