kgmpegiemeonmjdcnkbbablkphafjokh
page css ruler;page measure tools;Get page's/element's size/margin/padding/spacing info Measure the size of the element and the spacing between elements on webpage. Hold down Alt (Windows) / Option (Mac) key, and move the cursor on the target element.
Show All Padding & Margins
Highlights margins and padding for all HTML elements in any webpage. Ever wanted to see the padding and margins for all elements on a web page all at once? This extension does just that, highlighting all padding and margins while providing additional information for target elements on hover. No longer will you have to troubleshoot your element positioning issues one element at a time through Chrome Dev Tools. With this extension, it's all just there for you to see. 1. Visualize Padding and Margins: Instantly see the padding and margins of all elements on a webpage, making it easier to understand and debug layout issues. 2. On-hover Details: Hover over any element to get detailed information about its padding, margin, and other styling properties. 3. Quick Toggle: Activate or deactivate the extension with a simple click on the extension icon or through the convenient keyboard shortcut Ctrl+Shift+Y. Why You Need This Extension: 1. Save Time: Quickly diagnose and fix layout problems without digging through nested elements in Chrome Dev Tools. Improve Workflow: Streamline your web development and design process by having a clear visual representation of element spacing. 2. Enhance Understanding: Gain a better understanding of how CSS properties like padding and margin affect your webpage layout. Whether you're a seasoned web developer, a designer, or someone learning CSS, this extension will make your life easier by providing a clear and immediate view of the spacing properties of elements on any webpage.
Measure Everything
Measure Everything is a powerful tool for measuring distances between DOM Elements on a webpage. Just click an element and then hover your mouse pointer over another element in order to get instant distance measurements. You need to activate the extension by clicking on its icon before using it or pressing the hotkey Alt+Shift+M. Consider pinning the icon of this extension for easier use. Any feedback and reviews are welcome.
Hover inspector like in Zeplin , Figma
Inspector is the tool which mimic display dimension between selected and hover element. It would be good for designers, QA version 3.0.2 - fix bug: prevent click(thanks Marcelo Alejandro) - add background rule permission for save setting version 3.0.1 - fix bug: extension dropped (thanks @invisioN7) version 3.0.0 - refactor core(prepare for the new features) - add sidebar (setting, more details of selected element) - add freezing selected element after 2 click - press 'space' for unfreeze selected element - add link to discord - add uninstall form - fixed calculation position of popup version 2.0.0 - used ReactJS (expected simplifying of maintain and support) - add data: padding, margin, font, color, background, line-height, class, id - fixed calculation position of popup version 1.1.0 - add highline padding(green color) and margin(orange color). - fix bugs version 1.0.5.1 - minify file for more faster loading version 1.0.5 - add top bar with styles(padding, margin, font-size, height, width) for hover and selected element - fixed bugs (when user scroll label and lines position not display correctly) - add change style for label which display height and width hovered element - change active and regular icon: - add 2 hotkeys: -- command + enter / ctrl + enter - for hide/show topbar -- esc for close extension
SpacingJS
Precision spacing measurement tool for web developers and designers. Hold Alt/Option key and hover over elements to measure. Precision spacing measurement tool for web developers and designers. Measure distances, margins, and padding between webpage elements with pixel-perfect accuracy. 🎯 How to Use: 1. Click the extension icon to activate SpacingJS 2. Hold Alt (Windows) / Option (Mac) and hover over any element 3. Move cursor to another element to see precise measurements 4. Click the icon again to deactivate ✨ What's New in v1.1.0: - Smart Toggle: Visual feedback shows when active (green dot on icon) - Keyboard Shortcuts: Quick activation with hotkeys - Enhanced Measurements: Shows element tag, class, and font size - Better Compatibility: Works with all element types including SVG 💡 Pro Tips: - Hold Shift to keep measurements visible longer (perfect for screenshots) - Works on any website (except browser internal pages) Perfect for designers, developers, and QA teams who need precise measurements for pixel-perfect layouts.
