Ruler Tool
Measure distances and dimensions on any webpage with pixel-perfect accuracy using this precision tool from DevTools Suite. Draw guidelines and get exact measurements for design work.
Pixel-Perfect Measurements for Precise Design
Ruler Tool brings design-grade measuring capabilities to your browser. Measure any area with click-and-drag, place guide lines anywhere on the page, inspect element dimensions on hover, and overlay a customizable grid - all the tools you need to verify designs match specifications exactly.
Key Features
Everything you need for precise web measurements
Area Measurement
Click and drag to measure any rectangular area on the page. Live dimension display shows width and height in pixels as you draw, with precise control over measurement bounds.
Dual Ruler System
Horizontal and vertical rulers with major ticks every 50px (labeled) and minor ticks every 10px. Live cursor indicator shows your exact position on both rulers simultaneously.
Guide Lines
Click on rulers to create horizontal and vertical guide lines anywhere on the page. Each guide displays its pixel position and can be dragged to reposition or double-clicked to remove.
Element Inspector Mode
Hover over elements to automatically detect dimensions, tag name, ID, and class names. Visual highlighting shows the element boundaries with an information overlay.
Grid Overlay
Toggle a full-page grid overlay with customizable spacing from 10px to 200px. Perfect for checking alignment and verifying designs follow a consistent grid system.
Editable Measurements
Drag measurement boxes to reposition them. Use 8-point resize handles (corners and edges) to adjust measurement bounds with 10px minimum size enforcement.
Multiple Measurements
With Pro, create unlimited simultaneous measurements on the page. Compare dimensions across different elements without losing previous measurements.
Real-Time Crosshairs
Cursor crosshairs extend across the viewport with live X, Y coordinate display. Know exactly where your cursor is positioned at all times.
Scroll-Aware Positioning
Rulers, guides, and measurements automatically adjust when you scroll the page. Measurements stay accurate regardless of scroll position.
Mode Switching
Toggle between Measure Area, Element Inspector, and Guide Lines modes. Each mode is optimized for different measurement workflows.
Element Information
Inspector mode shows element tag name, ID, class names, width, height, display property, and position property. Complete context for any element.
Batch Clear
Clear all measurements or all guides with dedicated buttons. Status display shows current count of active measurements and guides.
Pixel Precision
Exact measurements for verifying designs match specifications.
Multiple Modes
Area measurement, element inspection, and guide lines for different needs.
Customizable Grid
Adjustable grid spacing from 10px to 200px for alignment checks.