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.
An awesome extension!!! And it can be better if it saves all guidelines for future use. Guidelines now disappear whenever the page is reloaded and I need to add the lines again.
I'm really liking this extension so far. My biggest use for it is the column view, and because of that, I have a few requests/suggestions to possibly improve it: After pressing C, can we have the window let us specify a. Number of columns b. Color/opacity of columns (with a jquery color picker, perhaps?) c. Column width d. Gutter width e. Give us the option to limit the grid to the center of the window (i.e. for the 960 or 978 grids - should be default) or span the whole page if so desired Like I said - this is a fantastic, full-featured tool so far that just needs a bit of polish to make it really awesome.
Excelente, simple y util
just an amazing tool for newbies and rockies, thanks richard and chrome
Snapping and showing the distance between lines makes it so easy to measure things!
Perfect tool for image measuring on the fly. It scans Divs and let you set rulers!
I like that it can target elements. Exactly what I needed to inspect my (too) complicated layouts.
Doesn't work for me at all. Is this written to be platform-dependent? The write-up doesn't say anything to indicate this, but it doesn't work on my Macintosh.
This extension is auper AWESOME just one comment or bug the tape doesn't work inside Iframes inside pages could you please fix that?
Great to see such a simple tool like this as a Google extension. Very nice.