Designer Tools
A collection of tools to help you design and develop websites with precision.
Measurement tools, rulers and grids
Review user movement across collected snapshots.
View collected rating snapshots from the latest 7-day window to assess rating stability.
Compare 1-day, 7-day, and 30-day net growth and growth rate.
Review publication date, version, supported languages, and crawl timestamps.
Review the store description, core capabilities, and common use cases.
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:
Inspect the latest comments and rating distribution.
Store average score: 4.6. The bars below are calculated from synced review text only, so they may be empty for extensions that have public ratings but no synced comments yet.
Review related products from the Chrome Web Store detail page.
A collection of tools to help you design and develop websites with precision.
A tool for designers to measure screen dimensions
一款网页测量工具,支持吸附测量。为前端开发和ui设计提供便利。
Drop your mockup on the live page for pixel-perfect comparison with your code.
A pixel ruler for any live web page. Measure distances, inspect the box model, drop guides — DevTools stays closed.
Measure page elements size in pixel with an easy-to-use ruler.
Excellent!! Thank you v much. Except doesn't always work with PDF files...
Хорошая вещь! С моим придирчивым заказчиком (который придирался к каждому пикселю в дизайне) эта штука очень сильно выручила меня!
Wonderful plugin to ensure the pixel precision
Un orgasmo para el diseñador perfeccionista.
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.
Simple, minimalistic tool that does exactly what you want it for!
I use it a lot. Really useful!
Love this extension! Would like to see a toggle for showing/hiding the lines on the cursor. Sometimes I just want to place some lines, shut off cursor lines, and use the inspector to tweak my css, but the cursor lines can get a little in the way.
Eines der besten Vermessungstools, dass ich bis jetzt verwendet habe. Einfach zu bedienen und hat nur das nötigste, was gut ist. Man kann sich auch ein Grid erzeugen lassen. Die Hilfslinien lassen sich sehr einfach durch die Snap Funktionen setzen (erkennt auch die baseline bei Schriften), kann aber auch ausgestellt werden. Leider kann man nicht per Eingabe eine Hilfslinie exakt auf eine Position setzen, nur mit der Maus (Oder ich habe es noch nicht entdeckt). Aber das ist ehr unwichtig. Für jeden Frontend Entwickler oder Designer kann ich das Tool nur empfehlen. Macht auch keine Probleme wie manch anderes Tool.
Does not work with local files