Getting Started with Calipers

Calipers is a free, open-source Chrome extension that lets designers and developers instantly measure distances, inspect dimensions, and check alignment on any webpage. Think PixelSnap, but for the browser — with direct DOM access for pixel-perfect accuracy.

Installation

From the Chrome Web Store

1. Visit the Calipers page on the Chrome Web Store.
2. Click Add to Chrome.
3. Click the Calipers icon in your toolbar, or press ⌘⇧M to activate.

From Source

1. Clone the repository:

   git clone https://github.com/calipers/calipers.git

2. Install dependencies:

   pnpm install

3. Build the extension:

   pnpm build --filter=@calipers/extension

4. Open Chrome and navigate to chrome://extensions.
5. Enable Developer mode (top right toggle).
6. Click Load unpacked and select the apps/extension/dist folder.

Quick Tour

Activating Calipers

Press ⌘⇧M (Mac) or Ctrl+Shift+M (Windows/Linux) to toggle Calipers on the current page. You can also click the extension icon in your toolbar and use the on/off toggle in the popup.

Modes

Calipers has three modes, selectable from the popup or via keyboard shortcuts:

• Inspect (1) — Hover over elements to see their width and height.
• Measure (2) — Click two elements to measure the distance between them.
• Guides (3) — Place draggable alignment guides on the page.

Keyboard Shortcuts