Page Ruler Pro - Developers Tool

A comprehensive tool for developers & designers to measure, analyze, and inspect web elements with a glassmorphic UI.

# Chrome Web Store Description: Page Ruler Pro Professional precision ruler and element inspector. Measure dimensions, padding, and alignment with a stunning glassmorphic interface. **Full Description:** ### 📐 Precision is a Choice. Make it Pro. **Page Ruler Pro** is the ultimate digital measuring companion designed specifically for modern web designers, developers, and UI/UX enthusiasts. Forget clunky, outdated browser extensions—Page Ruler Pro combines pixel-perfect accuracy with a state-of-the-art glassmorphic design that feels like a native part of your creative workflow. Whether you are auditing a live site, aligning complex layouts, or verifying spacing tokens, Page Ruler Pro gives you the data you need in real-time, all within a beautiful, clutter-free interface. --- ### 🚀 Key Professional Features #### 📏 High-Precision Element Inspection Hover over any element on any webpage to instantly see its dimensions (width x height) and its exact position relative to the viewport. Locked selections provide deep-dive details including: * **Tag identity**: Tag names, IDs, and classes. * **Typography details**: Instant readout of font-size and font-family. * **Color Extraction**: Automatically identifies text colors, background colors, and border colors with visual swatches. * **Source Links**: Quick access to image or background-image URLs. #### 📐 Adaptive Custom Selection Need to measure the "white space" between elements? Use our Custom Selection tool. Simply click and drag anywhere on the screen to create a measurement bounding box. It’s perfect for checking gutters, margins, and arbitrary layout distances that the DOM won't tell you. #### 🔄 Integrated Smart Converter No more manual math or external calculator tabs. Our built-in unit converter works in real-time: * **Convert instantly**: Between Pixels (px), REM, EM, and Percentage (%). * **Standardized**: Calibrated to a 16px base font size for modern development standards. * **Contextual math**: Instantly see how a pixel value translates to a percentage of a 1000px container for quick layout prototyping. #### 📜 Persistent Measurement History Never lose a measurement again. Every element you "lock" or copy is automatically saved to your session History. * **Quick Reference**: Revisit past dimensions even after you've moved to a different part of the page. * **Clean Workflow**: One-click "Clear History" to start fresh on a new project. --- ### 💎 Why Page Ruler Pro? * **Premium Aesthetics**: Features a modern "Glassmorphism" UI with frosted-glass effects, subtle gradients, and smooth animations that look stunning in both light and dark modes. * **Built for Speed**: Lightweight and lightning-fast. No bloat, no ads, and optimized for performance so it won't slow down your browser. * **Developer Friendly**: "Copy Info" button instantly formats all element specs into a clean layout ready to be pasted into your CSS, Jira tickets, or design hand-off documents. * **Context Menu Support**: Toggle the ruler with a simple right-click anywhere on the page. --- ### 🛠️ How to Use 1. **Activate**: Click the extension icon or use the context menu to toggle the Ruler. 2. **Inspect**: Hover over elements to see live dimensions. Click to "lock" the details. 3. **Measure**: Drag your mouse to measure custom areas and distances. 4. **Convert**: Open the "Converter" tab to translate px into REM/EM/%. 5. **Review**: Check the "History" tab to see all your recent measurements. --- ### 🔒 Privacy Focused We believe in your privacy. Page Ruler Pro: * Does **not** track your browsing history. * Does **not** send data to external servers. * Only requires the `activeTab` permission to provide measurement tools when you actually need them. --- **Elevate your web development workflow today. Download Page Ruler Pro and measure the web with style and precision.** *Designed with ❤️ for the Developer Community.* FREE TO USE