klafaajjjfgmhjiffeocmafoehignopn
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.
Designer Tools
A collection of tools to help you design and develop websites with precision. Designer Tools helps web designers and developers achieve pixel-perfect results with ease. It includes features like rulers, guidelines, and multiple ways of measuring elements and spacing. You can customize your setup with grids, move or remove guides, and tweak settings to match your workflow. PLUS subscribers gain access to extra tools and resources to enhance their design process.
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.
Dimensions
A tool for designers to measure screen dimensions This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn't really work with images because there the colors change a lot pixel to pixel. Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring. You can start and stop dimensions with the ALT + D shortcut. Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area. Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcome! https://github.com/mrflix/dimensions
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.
