Grid Ruler

Ruler Measurement

Make your measurement easy with Chrullex (CH-rome RUL-er EX-tension) Powerful measure plugin for chrome. No more junk and party worked solutions. Measure height and width on page with grid lines. Fully draggable and resizable. Features: - Press ctrl + mouse click to allow multiple rulers. - Press ctrl + q to remove all ruller from page. - Press arrow right/left to rotate. - Press ctrl + i to toggle offset info. - Press alt + q to toggle run state. - Customize extension through option page Check out the new Themes option. Check out the new Unit option, that allows to change measure units! If you find a bug, have any suggestions for improving the extension or just want to thank the author feel free to mail me.

Tape

Measurement tools, rulers and grids Tape is a tool for pixel-perfect website development. It lets you put down guides that snap intelligently to the page content (and stick to it if it moves on scroll or resize), and helps you easily measure positions and sizes of elements. It knows about borders and padding, and will even snap to the baseline of text. There is on-screen help, the ability to display user-defined column and row grids, a built-in magnifying glass for pixel-perfect measurement, and all guides can be quickly toggled on and off with a single keystroke. Unlike some extensions it will not interfere with any webpage you visit unless you click the Tape icon. Once installed: Click icon to activate. Read help, or press Space to dismiss it. Mouse over document, observe that rules snap to useful positions (including baselines!), and use keys as follows: H – drop Horizontal rule here (or remove if there's one here already) V – drop Vertical rule here (or remove if there's one here already) B - drop Both horizontal and vertical rules here arrow keys – fine adjustment (+shift, +alt for larger adjustment) S – toggle snapping on and off. P – toggle pointer events on and off O – set origin to current position. C / R – set column or row grid L or backquote – toggle loupe. (To refresh loupe image, press L twice.) Space – toggle help Press ESC to toggle everything on and off. Press X to reset all guides on a page.

Simple Ruler Beta

Measure it! THIS EXTENSION IS FOR BETA TESTING This simple and easy to use tool allows you to measure elements on the web page. Click to start selection, click again to complete it. See the width and height of the area you selected. You can change the color of background and selection in the Options tab.

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