Chrome Extension To Snap And Measure Website Content And Elements

0 Comments
Editor Ratings:
User Ratings:
[Total: 0   Average: 0/5]




Tape is a Chrome extension that enables you to snap the page contents and measure the pixels of the elements of any webpage. Tape lets you have a perfect layout of any element of the web page as it is considered to be a pixel-perfect tool for website development.

Tape lets you intelligently snap the contents of a page and enables you to measure the actual position and size of the elements. It has the ability to snap the baseline of text and gives you detailed display about borders, padding, column grids and row grids. Tape has an in-built magnifying glass that lets you have perfect measurement of pixels. All the actions can be handled just with a keystroke.

Install Tape To Measure Pixels Of Website Elements:

For installing Tape, go to Google Chrome or you can visit Chrome webstore. You can avail the link for this Chrome extension, at the end of this article. When you are at the download page of Tape, just click “ADD TO CHROME” available there. Hit that button for installing this extension to your browser. Tape extension icon will appear on the extreme right of your browser and you can access it from there.

tape 1

How To Use Tape To Snap Page Contents And Measure Website Elements?:

As you click on the Tape icon a list of keyboard shortcuts will appear to the bottom left corner of your browser. Your cursor turns up into a red colored ruler displaying horizontal and vertical lines. Ruler enables you to snap the elements of the webpage. Multiple number of rulers can be added, as per the requirement of the web designer so as to attain an accurate measurement. The shortcuts can be used further to add or remove the grid lines or to toggle.

Tape has an in-built magnifying glass or the loupe that enables to get the measurements of smaller elements by adding rulers to it. The point of origin can be set on any particular point just by using the shortcut O, on the webpage. It enables you to set the column and row grids also.

tape controls

As you move your cursor over the webpage it lets you know about the borders and the baseline of the text. When your Tape is active the webpage does not remain purposeful, this enables you to use the shortcut keys without missing their functionality. This tool does not remain active for other tabs of your browser, until you want the tool to be active on other webpage as well. Tape can be used to work with both large and small design elements. It can be toggled on and off just by hitting the ESC button on the keyboard.

Key Features Of Tape:

  • Fast and accurate
  • Displays pixel measurements
  • In built magnifying glass is available
  • Keyboard shortcuts available
  • Ruler with horizontal and vertical lines are available
  • Guides can be toggled on/off with a single keystroke
  • Tape when enabled, webpage does not remain purposeful
  • Retrieves the point of grid even if you deactivate Tape and activate it later

My Verdict For Tape:

Tape is a website development tool that gives you detailed information about each and every element of that particular webpage. It comprises of rulers and grids that help you in measurements. If you are a website designer then Tape lets you have a perfect layout. The best part of this tool is that until you exit the browser or close the tab it remembers your previous point on which you were working even if you deactivate Tape and activate it later.

The features are just apt for web designers. So you can grab this from here.

Editor Ratings:
User Ratings:
[Total: 0   Average: 0/5]
Works With: Google Chrome
Free/Paid: Free