Tape

Description from extension meta

Measurement tools, rulers and grids

Image from store Tape

Description from store [v2.0 fixes a bug where Tape will not install. Also adds nudging (with the arrow keys), removing the last dropped rule (with Z) and cosmetic changes.] 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. Please leave feedback or send me suggestions at [email protected]

Latest reviews

(2019-09-27) Dale Sheeley: DOES NOT WORK
(2019-08-26) Paul Vasich: I use this all the time. Perfect tool. Does one job really, really well. I just wish I could get it on Firefox :(
(2019-08-19) Tiby: Love it. If there could be an option for quickly adding the last type of rule via left click, that would be amazing (horizontal, vertical or both). I would also suggest left click to default to "set origin" when no rule has been placed yet. What would make this absolutely insane would be snapping to bitmap pixels as well (maybe in a separate mode). It would have to detect edges via colors wich can be quite complicated. A would be very very nice to have I'd say.
(2019-03-20) Nikola Jovanovic: I get the impression that it is not working properly when you use dev tools, turn on devices view, and set the zoom to, for example, 50%.
(2019-02-26) It's a good and helpfull tool.
(2019-01-16) Rafael Sanches: I love it
(2018-11-15) Ray Lui: Very good work and thanks for your effort! Really love it and always use it as very helpful on my development jobs. Could you please consider to add one more feature which only element properties can toggle because they will mess up so that the distance cannot be viewed clearly if inspecting the page in small viewport such as mobile device size. Anyway, thanks again!
(2018-09-27) Diogo Nunes: Perfect, really useful and easy to use. I just don't like the logo... the colors don't combine well, it's not anti-aliased and the arrows should be symmetric. For an extension about measuring pixels, I think the logo should be pixel perfect :P I can do a Pull Request if you want!
(2018-08-26) Guy Barry: I like it, but I'm uninstalling it.. using the esc key as a shortcut is an odd choice.. esc is used for so many other things, and there are other key combos that conflict with other tools. I'd keep the extension if it could be deactivated properly from the toolbar button.
(2018-03-13) Tom Wheeler: This is the _best_ extension. Has helped me to get things right, and to show other people that something is correctly placed.
(2018-01-10) PRASAD SOLANKI: Really useful plugin
(2017-10-31) Martin Diko: Extremely helpful for both developers and QAs. It cures my OCD.
(2017-07-25) Lyudmila S: Кажется то, что искала. Спасибо Как убрать или сдвинуть панель с подсказками? Подскажите!)))
(2017-01-19) Yevheniy Holubchuk: Sample AMAZING!
(2017-01-11) Darko Petreski: Best measurement plugin ever.
(2016-11-15) Dmitrii Shargorodskii: Inner perfectionist`s essential extension.
(2016-07-01) Tom Schreck: After installing Tape, I could not get the tool to work. Turns out I was accessing a file (file:///blah/blah/blah/index.html). I had to go to Manage Extensions where I could select 'Allow access to file URLs' for this plugin. As soon as I did that, it worked. The tool is very useful.
(2015-12-20) Yuriy ZHura: Отличный инструмент. Аналога пока не нашел
(2015-06-16) Áron Fernbach: A snap funkció és a nagyító nagyon nagy segítség a méréshez, de persze ha nem akarjuk ki is lehet kapcsolni. ráadásul a tudja azt is, hogy a szöveg látható pixeleinek aljához/tetejéhez ugrik, amit inspectorral nem tudsz kiszámolni. Bitangjó alkalmazás, csak ajánlani tudom!
(2014-10-21) Excellent!! Thank you v much. Except doesn't always work with PDF files...
(2014-08-21) Anton Savenko: Хорошая вещь! С моим придирчивым заказчиком (который придирался к каждому пикселю в дизайне) эта штука очень сильно выручила меня!
(2014-07-25) Pedro Sá: Wonderful plugin to ensure the pixel precision
(2014-07-23) Conrado Lopez Soutric: Un orgasmo para el diseñador perfeccionista.
(2014-05-31) grant kiely: This is by far my favourite web development extension. I hope there is future development on this, to make it even more stable/awesome in random places. ie) over the top of images, pdf's, iframes etc. And sometimes the labels on the guidelines block out elements a little making it hard to measure.
(2014-05-19) Ilia Markov: Simple, minimalistic tool that does exactly what you want it for!

Statistics

Installs

16,453

Links

Extension in store