Description from extension meta
Measurement tools, rulers and grids
Image from store
Description from store
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.
Latest reviews
- (2023-07-10) Александр Лобков: Расширение из разряда то что надо и ничего лишнего. Рекомендую.
- (2023-05-17) Bronson A.: Wonderful!
- (2023-05-17) Bronson A.: Wonderful!
- (2022-08-31) irina p: broken? i click on it and nothing happens.
- (2022-08-31) irina p: broken? i click on it and nothing happens.
- (2022-07-18) Kenneth Thomas: Absolutely awesome! Above the cut, the ability to drop guideline + CSS integration set this extension apart.
- (2022-07-18) Kenneth Thomas: Absolutely awesome! Above the cut, the ability to drop guideline + CSS integration set this extension apart.
- (2021-11-18) Sergey Nekrasov: функциональность на высоте, при этом ничего лишнего
- (2021-08-31) Александр Ратманский: One of the best extensions on the marker. Thank you for not giving it up and continuing to develop it.
- (2021-08-31) Александр Ратманский: One of the best extensions on the marker. Thank you for not giving it up and continuing to develop it.
- (2021-07-27) Todd Chambery: Simple to use, indispensable.
- (2021-07-27) Todd Chambery: Simple to use, indispensable.
- (2021-06-09) Magno Alberto: The best ruler extension ever on the Chrome Web Store. Easy to use and super complete, it provides all the necessary information from a ruler! Even more complete than the Photoshop ruler itself.
- (2021-06-09) Magno Alberto: The best ruler extension ever on the Chrome Web Store. Easy to use and super complete, it provides all the necessary information from a ruler! Even more complete than the Photoshop ruler itself.
- (2020-11-14) Diego Alejandro Montoya G.: Excelente!
- (2020-10-23) An Vei: Good!
- (2020-10-23) An Vei: Good!
- (2019-09-27) Dale Sheeley: DOES NOT WORK
- (2019-09-27) Dale Sheeley: DOES NOT WORK
- (2019-08-26) 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-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-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-02-26) It's a good and helpfull tool.
- (2019-01-16) Rafael Sanches: I love it
- (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-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-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-08-26) Guido: 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-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) P S: Really useful plugin
- (2018-01-10) P S: Really useful plugin
- (2017-10-31) Martin Diko: Extremely helpful for both developers and QAs. It cures my OCD.
- (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 Holubchyk (Nonamen): Sample AMAZING!
- (2017-01-19) Yevheniy Holubchyk (Nonamen): Sample AMAZING!
- (2017-01-11) Darko Petreski: Best measurement plugin ever.
- (2017-01-11) Darko Petreski: Best measurement plugin ever.
- (2016-11-15) Dmytro Sharhorodskyi: Inner perfectionist`s essential extension.
- (2016-11-15) Dmytro Sharhorodskyi: 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.
- (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: Отличный инструмент. Аналога пока не нашел
Statistics
Installs
10,000
history
Category
Rating
4.6323 (155 votes)
Last update / version
2024-05-22 / 2.2
Listing languages
en