lhmfelgpcifnbbgmbpoiembnnenjbpkb
Elegant resizable ruler with real-time MM/CM measurements! MM and CM Ruler is a lightweight and easy-to-use Chrome extension that helps you measure anything directly on your screen. Perfect for designers, developers, and anyone who needs precise on-screen measurements. Real measurements in millimeters (mm) and centimeters (cm) Simple and minimal interface Use it to measure website elements, images, or UI layouts directly inside your browser. If you find this tool helpful, you can support its development via PayPal: Donate here https://paypal.me/MartinTarkus
Grid Lines Ruler
Create grids on pages that provide the developers visual hints to help in developing the web app layouts. 1. Download and add this extension from Google Chrome. 2. Click on the extension to activate its working. 3. Drag from both Vertical ↕️ or Horizontal ↔️ from the main ruler to create grids. #️⃣ 4. Click on the intersection of vertical and horizontal grids to go into ruler mode. 5. Press and hold the “SHIFT” button to get a straight line. ✨Features ✨: 1. 🆓 & super Easy to set-up. 🆓 2. Creates vertical and horizontal grids. #️⃣ 3. A ruler 📏 to measure distance between your grids too. 📌Pin our extension to create and manage overlays on pages to provide you the visual hints to develop the web app layouts.
Grid Ruler
Create grids and measure their distance easily. It allows web developers to create vertical and horizontal grids, Photoshop style. It has a ruler to measure distance between your grids too. - click & drag from main vertical/horizontal ruler to create grid guides. - click on intersection of vertical ruler and horizontal ruler to go into measurement mode. - while in measurement mode, hold `Shift` key to get a straight line.
Page Grid Ruler
Draw a grid view, get page dimensions in pixel (px) unit and draw a rule Features: - Displays a grid view with a customizable grid size. - Presents a reference box. - Shows a ruler indicating width, height, start, and endpoints. How to Use It: 1. Navigate to a page and activate the action button. 2. The extension transitions to grid mode, allowing you to create a personalized ruler. 3. The ruler dynamically displays width, height, start, and endpoint measurements. 4. To return to normal browsing mode, press the "Escape" key or click the action button once. 5. Use mouse wheel to resize grid size Does this extension support "mm," "cm," or "in" units? No, it does not provide precise values in these units. Instead, the extension employs pixel units. To convert pixel units to "cm" or "in," you'll need the screen's PPI (pixel density or resolution) value. How can I modify the default grid size? Right-click on the action button. Two menus will appear, allowing you to adjust the grid size and thickness.
Better Ruler
A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design **A smart web ruler with element snapping for easier frontend development and UI design.** - **Smart Snapping**: Hold `Alt` (or `Option` on Mac) while moving the cursor to automatically detect and snap to web elements. Supports snapping to **edges, 4 corners, and 4 edge midpoints**, displaying dimensions instantly. The snap preview uses a contrasting color to distinguish from measurement boxes. - **Easy Measurement**: Click and drag to create a measurement layer that snaps to element edges automatically. - **Flexible Editing**: Double-click any layer to enter edit mode: move, resize, or fine-tune. - **Esc**: Exit edit mode - **Backspace**: Delete the selected layer - **Status Indicator**: The extension icon changes based on status (colored = active, gray = inactive) for easy identification. - **Shortcuts Help**: Hover over the `?` button in the toolbar to view all available shortcuts. - **Customization**: - **Individual Colors & Opacity**: Each measurement box can have its own color and opacity; editing when selected only affects the current item - **Global Mode**: When enabled, changing color or opacity affects all existing measurement boxes simultaneously - **Single Mode**: When enabled, only one measurement box can exist at a time; new boxes automatically clear old ones - **Size Position**: Configure where dimension labels appear (center, corners, etc.) - **Dashed Background**: Choose between solid or dashed background for measurement boxes - **Reference Lines**: Automatic horizontal and vertical reference lines with X, Y coordinate labels - **Crosshair Display**: Configure mouse crosshair display mode - **Quick Controls**: - Press `f` (configurable): Toggle toolbar visibility - Press `r` (configurable): Toggle reference lines - Press `s` (configurable): Toggle snap mode (when on, snapping is always active without holding Alt; Alt temporarily disables snapping) - Press `Shift`: Toggle dimension labels - `Ctrl+Z` / `Cmd+Z`: Undo (supports draw, delete, move, resize operations) - `Ctrl+Shift+Z` / `Cmd+Shift+Z`: Redo - `Alt + z` (customizable): Global shortcut to toggle the extension - Double-press `z` (configurable): Quickly activate/deactivate within the page (after first launch) - **Copy Dimensions**: Click the dimension label on any measurement box to copy its size (e.g., `320 x 180`) to clipboard. - **Toolbar Hint**: A toast notification shows how to restore the toolbar after hiding it. - **Shadow Color**: The snap preview color is independently configurable, no longer derived from the measurement box color. - **Local File Support**: Enable "Allow access to file URLs" in `chrome://extensions` to measure local HTML files. - **Mobile Simulation**: Works in DevTools mobile simulation mode (ensure `device type` is set to `no touch`).
