应用截图
详细介绍
Measure sizes, distances, margins and paddings of any element on any web page.
Screen Ruler is the perfect companion for web developers and designers wanting to validate the implementation of their websites. Once activated, Screen Ruler allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any element. You can also select an element to measure distances to other elements.
Usage
- Toggle Screen Ruler by clicking the extension icon, selecting “Screen Ruler” from the right-click context menu, or using the shortcut `Alt/Option + Shift + R`.
- Hover over elements on web pages to display their sizes, margins, paddings, tag names, IDs, and classes.
- Select an element by clicking on it directly, this will turn the highlight red. To deselect, click again, press Escape or select a different element.
- To select the parent of an element, use `Alt/Option + Up`, moving your selection to the parent element instead, use `Alt/Option + Down` to reverse your selection.
- View the computed CSS of the currently selected element in the side panel. Click the "Copy CSS" button to copy the computed CSS of the currently selected item to your clipboard.
Features
- Measure the pixel size of any element.
- Measure the pixel distance between any two elements.
- HTML tag names, class names and IDs.
- Parent/child selection shortcuts.
- Responsive selections resize with your browser window.
- Access from the context menu.
- Computed CSS inspect.
- Copy CSS to clipboard.
- Works on any web page.
- Customize keyboard shortcuts by visiting `chrome://extensions/shortcuts`.
Screen Ruler PRO
Screen Ruler also offers a PRO tier which unlocks additional features.
1. Element Inspect: See an element's properties when you move your mouse over it. Includes information about element position, size, rendered font, colors and more.
2. Layout Grid: Overlay a layout grid on top of the site to ensure the alignment of your designs.
3. Capture a screenshot
Screen Ruler is the perfect companion for web developers and designers wanting to validate the implementation of their websites. Once activated, Screen Ruler allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any element. You can also select an element to measure distances to other elements.
Usage
- Toggle Screen Ruler by clicking the extension icon, selecting “Screen Ruler” from the right-click context menu, or using the shortcut `Alt/Option + Shift + R`.
- Hover over elements on web pages to display their sizes, margins, paddings, tag names, IDs, and classes.
- Select an element by clicking on it directly, this will turn the highlight red. To deselect, click again, press Escape or select a different element.
- To select the parent of an element, use `Alt/Option + Up`, moving your selection to the parent element instead, use `Alt/Option + Down` to reverse your selection.
- View the computed CSS of the currently selected element in the side panel. Click the "Copy CSS" button to copy the computed CSS of the currently selected item to your clipboard.
Features
- Measure the pixel size of any element.
- Measure the pixel distance between any two elements.
- HTML tag names, class names and IDs.
- Parent/child selection shortcuts.
- Responsive selections resize with your browser window.
- Access from the context menu.
- Computed CSS inspect.
- Copy CSS to clipboard.
- Works on any web page.
- Customize keyboard shortcuts by visiting `chrome://extensions/shortcuts`.
Screen Ruler PRO
Screen Ruler also offers a PRO tier which unlocks additional features.
1. Element Inspect: See an element's properties when you move your mouse over it. Includes information about element position, size, rendered font, colors and more.
2. Layout Grid: Overlay a layout grid on top of the site to ensure the alignment of your designs.
3. Capture a screenshot
