Page Ruler
AvailableVersatile measurement tool with dual modes: Box Measure for pixel-perfect element dimensions and Visual Ruler for rotatable multi-unit measurements with alignment guides.
Overview
Key Features
- • Dual measurement modes: Box Measure and Visual Ruler
- • Box Mode: Multiple measurement boxes (up to 10 simultaneous)
- • Box Mode: Fixed dimensions feature with adjustable width/height
- • Box Mode: 6 customizable alignment guide lines (edges and center)
- • Visual Ruler: Draggable, rotatable ruler with angle display
- • Visual Ruler: Multi-unit support (pixels, centimeters, inches)
- • Visual Ruler: 3 vertical guide lines (Left, Right, Center V) for precise alignment
- • Real-time dimensions with 8-point resize handles
- • Comprehensive color customization with opacity control
- • Comprehensive Help & Information panel with keyboard shortcuts documentation
- • Info button (i) for quick access to tool documentation and usage tips
- • G button for quick toggle of all guide lines (Purple=ON, Gray=OFF)
- • Mode indicator buttons: Green for Box Measure (B), Orange for Visual Ruler (V)
- • Keyboard shortcuts (Ctrl/Cmd+Click for multiple boxes, arrow keys for dimensions)
- • Persistent settings storage across sessions
- • One-click mode switching and ESC key to exit
Screenshots & Demo
Measuring element dimensions with pixel precision
How to Use
Getting Started
- 1. Activate the extension: Click the Page Ruler icon in your Chrome toolbar
- 2. Choose your mode: The tool starts in Box Measure mode. Use the mode indicator buttons (B for Box Measure, V for Visual Ruler) with green and orange backgrounds to easily identify the active mode
- 3. Access help: Click the info button (ℹ️) to open the Help & Information panel with keyboard shortcuts and usage tips
- 4. Customize settings: Click the gear button (⚙️) to access settings for colors, dimensions, guide lines, and more
- 5. Deactivate: Press Esc to clear measurements, press again to exit the tool
Box Measure Mode
📦 Basic Usage: Click and drag to create a measurement box. See real-time dimensions (width × height + area).
🔢 Multiple Boxes: Hold Ctrl (or Cmd on Mac) while clicking to create up to 10 boxes simultaneously for comparing elements.
📐 Fixed Dimensions: Enable in settings to create boxes with predefined width/height. Adjust values using arrow keys (↑/↓ by 1px, Shift+↑/↓ by 10px) or direct input.
✏️ Resize: Drag the 8 handles (4 corners + 4 edges) to adjust box size. Disabled when Fixed Dimensions is active.
📍 Move Boxes: Click and drag inside any box to reposition it on the page.
📏 Guide Lines: Enable 6 optional guide lines (left/right edges, top/bottom edges, center horizontal/vertical) with customizable colors for precise alignment.
Visual Ruler Mode
📏 Draggable Ruler: Click and drag the ruler body to move it anywhere on the page.
🔄 Rotation: Drag the blue circle handle to rotate the ruler. Double-click the handle to reset to 0°. Hold Ctrl while dragging to snap to 45° increments.
📐 Rotation Angle: The current rotation angle is displayed at the top of the ruler (toggleable in settings).
📊 Multi-Unit Support: Click the unit button to switch between pixels (px), centimeters (cm), and inches (inch).
↔️ Resize: Drag either end of the ruler to adjust its length.
🎯 Handle Position: Switch rotation handle between left and right sides in settings.
📏 Guide Lines: Enable 3 vertical guide lines (Left edge, Right edge, Center V) for precise alignment verification. Guide lines customize in settings and provide visual reference for layout alignment.
Key Features in Detail
🔄 Dual Measurement Modes
Seamlessly switch between Box Measure mode (for measuring elements and areas) and Visual Ruler mode (for linear measurements with rotation). Each mode has its own specialized features and customization options.
🔢 Multiple Measurements
Create up to 10 measurement boxes simultaneously using Ctrl/Cmd+Click. Perfect for comparing dimensions across multiple elements or documenting multiple areas at once.
📐 Fixed Dimensions Mode
Set predefined width and height to create consistent-sized measurement boxes. Adjust dimensions with arrow keys (1px increments) or Shift+arrows (10px increments). Perfect for testing specific sizes or creating standard measurement templates.
🔄 Rotatable Ruler
Visual Ruler mode features full 360° rotation with angle display. Ctrl+drag for 45° snap angles. Double-click rotation handle to reset. Switch handle between left/right sides for different workflows.
📊 Multi-Unit Support
Visual Ruler supports pixels (px), centimeters (cm), and inches (inch) with precise markings for each unit. Switch units on-the-fly to match your design specifications or regional preferences.
📏 Alignment Guide Lines
Box mode: 6 guide lines (edges & center). Ruler mode: 3 vertical guide lines (Left edge, Right edge, Center V) for layout alignment. All guide lines have customizable colors and individual visibility toggles.
🎨 Comprehensive Customization
Customize outline colors, background colors, opacity (0-100%), guide line colors, ruler colors, and more. All settings saved automatically and persist across sessions.
⌨️ Keyboard Shortcuts
ESC to clear/exit, Ctrl/Cmd+Click for multiple boxes, arrow keys for dimension adjustments, Ctrl+drag for snap rotation. Designed for efficient workflow without leaving the keyboard.
Keyboard Shortcuts
Tips & Best Practices
- 💡 Use Box Measure mode for measuring multiple elements simultaneously - hold Ctrl/Cmd while clicking to compare up to 10 elements
- 💡 Use Visual Ruler mode for measuring distances and angles - perfect for diagonal measurements or checking alignment at specific angles
- 💡 Enable guide lines to help align measurements across the page - especially useful when checking consistent spacing or alignment
- 💡 Use Fixed Dimensions mode to quickly check if elements match specific sizes (e.g., testing if an image is exactly 200×200px)
- 💡 Customize guide line colors to contrast with your page content - use different colors for box and ruler guides for clarity
- 💡 Switch between px, cm, and inch units in Visual Ruler mode to match your design specifications or regional standards
- 💡 All settings are saved automatically - customize colors, dimensions, and preferences once and they persist across all sessions
- 💡 Take screenshots with measurements and guide lines visible for documentation, design reviews, and bug reports
Installation
Easy Installation
- 1. Click the "Install from Chrome Store" button above
- 2. Click "Add to Chrome" on the store page
- 3. Confirm by clicking "Add extension"
- 4. The extension will appear in your toolbar
System Requirements
- ✓ Google Chrome 88+
- ✓ Chromium-based browsers
- ✓ Windows, Mac, Linux
- ✓ No additional permissions required
Support & Contact
Get Help
Having issues or need assistance? We're here to help!
Email: devtooleasy@gmail.com
FAQ
How accurate are the measurements?
Page Ruler provides pixel-perfect accuracy based on the browser's rendering engine. Measurements are precise to the exact pixel. Visual Ruler mode also provides accurate conversions for centimeters and inches based on standard DPI calculations.
What's the difference between Box Measure and Visual Ruler modes?
Box Measure mode is for measuring rectangular areas and elements (width × height + area), supporting multiple boxes simultaneously. Visual Ruler mode provides a linear ruler that can be rotated to any angle, perfect for measuring distances, diagonals, and checking alignment at specific angles.
Can I change the measurement units?
Yes! Visual Ruler mode supports pixels (px), centimeters (cm), and inches (inch). Click the unit button on the ruler to switch between units. Box Measure mode displays measurements in pixels only.
How do I measure multiple elements at once?
In Box Measure mode, hold Ctrl (or Cmd on Mac) while clicking to create additional measurement boxes. You can create up to 10 boxes simultaneously to compare dimensions across different elements.
What are guide lines used for?
Guide lines help visualize alignment across the page. Box mode offers 6 guide lines (left/right/top/bottom edges plus horizontal/vertical center lines). Visual Ruler mode offers 3 rotating guide lines that stay aligned with the ruler edges. All guide lines are optional and customizable.
Can I use it on any website?
Yes, Page Ruler works on all regular websites. It operates as a non-intrusive overlay that doesn't interfere with page functionality. Note: Chrome extensions cannot run on browser internal pages (chrome://, about:, etc.) - you'll receive a notification if you try to activate it on these pages.
Does it work with responsive designs?
Absolutely! Page Ruler adapts to viewport changes and is perfect for testing responsive layouts across different screen sizes. Use multiple measurement boxes to check breakpoint-specific dimensions.
Is there a mobile version?
Page Ruler is designed for desktop Chrome browsers. Mobile browser extension support is limited by browser capabilities.
Update Logs
View the latest updates and improvements for Page Ruler