hfpokjeoalngkknelljbenaobinichjf
This simple app allows you to create modify and delete horizontal and vertical guides to check if the elements are correctly aligned This simple app allows you to create modify and delete horizontal and vertical guides to check if the elements in the page are correctly aligned. 1. ESC key or click on browser icon to exit/enter the application. 2. Double click on a ruler to create a new guide. 3. Double click on a guide to delete it.
PerfectPixel by WellDoneCode (pixel perfect)
Drop your mockup on the live page for pixel-perfect comparison with your code. PerfectPixel adds a semi-transparent image overlay on top of any web page, letting you compare your frontend implementation against the original design mockup directly in the browser. Upload a design comp, adjust opacity, and immediately see where your code diverges from the spec — with pixel-perfect accuracy. No more switching between tabs or squinting at two screens side by side. How it works: install the extension, open any page, and drop in an image — drag and drop, paste a URL, paste from clipboard, or use the file picker. Position and scale the overlay, then adjust opacity to compare. - Overlay any PNG, JPG, or SVG on any web page - Adjustable opacity for real-time visual comparison - 4 blend modes (Difference, Invert, Multiply, Overlay) plus Normal — each useful for catching different types of mismatches - Lock the overlay to click through it and interact with page elements underneath - Per-domain persistence: your layers stay saved per site and restore automatically across browser sessions - Multiple layers per domain - Scaling, repositioning, and centering controls - Keyboard shortcuts for common actions - Unlimited simultaneous layers (free tier supports 2) - Folders to group layers - Layer rotation - Dark theme - Custom icon, accent color, and custom CSS Built for frontend developers, QA engineers, agencies, and development teams who need to verify that what they shipped matches what was designed. 350,000+ developers. 10+ years on the Chrome Web Store.
Measure-it
Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. Customize the overlay and selector from extension options.
CSS Grid Overlay
Easily check the grid alignment of your page across breakpoints. Supports multiples breakpoints and the usual grid values (gutters, columns, max width, etc). Configurations can easily be saved and shared among team members as json objects. [ { "columns": 4, "margins": 16, // px before and after the first and last column // these gutters work like margins: // if distance between columns is 32px, gutters are 16 "gutters": 16, "from": 0, // start of breakpoint in px // Optional values // "to": 599, end of breakpoint in px // grid will be centered after this maxWidth in px // otherwise it'll be full width // "maxWidth": 1440, // if you want to move the grid // (e.g. in a style guide with a left sidebar // you'd use offsetLeft to push the grid to the right // "offsetTop": 0, // "offsetRight": 0, // "offsetBottom": 0, // "offsetLeft": 0, // "backgroundColors": { // "columns": "rgba(234, 23, 140, .3)", // "gutters": "rgba(0, 231, 255, .3)", // "margins": "rgba(0, 191, 165, .3)" // } } ]
Dimensions Inspect | Gridman
Swiss army knife for front-end developers Gridman is the must-have Chrome extension for every front-end developer. This toolkit is crafted to boost your productivity and enhance your coding experience. DOM INSPECTION Instantly inspect DOM elements. Just hover to reveal details of the target and its parent elements, simplifying your analysis and debugging process. PERSISTENT Gridman uniquely persists between host reloads. Click on an element, and maintain your insights even after a page refresh, saving you valuable time and effort. TAILWIND Tailwind developers, rejoice! Easily inspect class sets and see how Tailwind CSS is bringing your designs to life. LAYOUTS Whether you're working with CSS Grid or Flexbox, Gridman displays rows, columns, paddings, margins, and more. Understand and manipulate complex layouts with ease. ANYWHERE Simply click the extension icon to activate this toolkit on any webpage. HOVER Unveil the intricacies of the DOM structure with a mere mouse hover. Visualize and understand how elements are nested and related. JOIN With Gridman you're not just using a tool; you're upgrading your entire development process. Download now and experience a revolution in your front-end development journey! REVIEW Your experience with Gridman matters to me deeply. If you've found it helpful, I'd be incredibly grateful if you could take a moment to share your thoughts in a review. Your feedback not only helps to improve but also assists fellow developers in discovering the benefits of this extension. Thank you for your support and for being a vital part of Gridman supporters! NOT WORKING If something didn't work as expected, I kindly request that you consider reaching out with any questions or issues you might have. I understand that each review, whether positive or negative, offers me an opportunity to learn and improve. However, I also believe in the importance of understanding and resolving any issues through communication. Please feel free to ask me anything at: https://fenvox.com/gridman#ask-section. I'm always here to assist you! LOCAL FILES You are trying it towards local file like 'file:///...' - but nothing shows up? > ANSWER: Gridman , like any chrome extension, will not work on local files. Chrome is not allowing it due to security reasons. And it is correct. You can imagine implications if any chrome extension would be able to access file system on your computer. To use Gridman on local files i'd recommend a tiny http-server which you can get here https://www.npmjs.com/package/http-server
