Page Ruler Pro - Developers Tool

About

# 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