Item logo image for PixelProbe

PixelProbe

Item media 3 (screenshot) for PixelProbe
Item media 1 (screenshot) for PixelProbe
Item media 2 (screenshot) for PixelProbe
Item media 3 (screenshot) for PixelProbe
Item media 1 (screenshot) for PixelProbe
Item media 1 (screenshot) for PixelProbe
Item media 2 (screenshot) for PixelProbe
Item media 3 (screenshot) for PixelProbe

Overview

Measure pixel distances between HTML elements with Figma-style measurement overlays

### Store Description Frontend developers waste hours manually calculating spacing and dimensions in browser DevTools when verifying design implementations. PixelProbe eliminates this friction by bringing Figma's measurement interface directly to any live website. Hold Alt/Option while hovering over elements to instantly see: • **Element dimensions** – Width and height displayed in pixels • **Inter-element distances** – Spacing between adjacent elements • **Margin and padding** – Computed box model values • **Viewport distances** – Distance from edges to any element • **Figma visual style** – Familiar red measurement lines and white labels **Built for developer efficiency:** - Zero setup – Works immediately on any website - Keyboard-driven activation – Hold modifier key to measure, release to deactivate - Configurable hotkeys – Choose Alt, Ctrl, Shift, or Cmd as your activation key - Cross-site compatible – Verify production sites, staging environments, or localhost - Privacy-focused – No data collection, all measurements happen locally **Primary use cases:** - Verify Figma/Sketch designs match production implementation - Debug layout issues with precise measurements - QA design consistency across responsive breakpoints - Measure competitor websites for design research This extension is essential for frontend developers, UI engineers, QA testers, and designers who need to ensure pixel-perfect implementations without switching between tools.

Details

  • Version
    1.0.0
  • Updated
    March 11, 2026
  • Offered by
    weijian19391
  • Size
    51.05KiB
  • Languages
    English
  • Developer
    Leong Wei Jian
    Email
    weijian19391@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Better Ruler

4.8

一款网页测量工具,支持吸附测量。为前端开发和ui设计提供便利。

Pixel Counter

5.0

Use Pixel Counter to measure pixels and use it as a ruler online or online lineal for web design, UI checks, and screen layouts

SpacingJS

4.3

Precision spacing measurement tool for web developers and designers. Hold Alt/Option key and hover over elements to measure.

PixelParallel by htmlBurger

4.7

PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers

Over.fig – Compare design to website in real time

4.6

Bridge the gap between design and code. Convert your Figma into a pixel-perfect semi-transparent overlay directly on your web page.

Screen Ruler

4.6

Use screen ruler for Chrome measure pixels on screen and as browser plugin. Get pixel ruler extension for website page dimensions.

Inspecta - visual QA and CSS editor

5.0

Inspect, compare and update CSS visually

Dimensions

5.0

You will like Dimensions as it allows you to measure elements on a page in pixels, like a page ruler.

Page Ruler

3.9

Measure page elements size in pixel with an easy-to-use ruler.

Pixel Screen Ruler

5.0

Pixel-perfect screen measurement tool for web

Pixel measurement

4.5

Pixel measurement: An online ruler for measuring pixels on screen

Dimensions

3.0

Dimensions: Measure CSS background image dimensions with ease. Use the pixel ruler for accurate and quick size assessments

Better Ruler

4.8

一款网页测量工具,支持吸附测量。为前端开发和ui设计提供便利。

Pixel Counter

5.0

Use Pixel Counter to measure pixels and use it as a ruler online or online lineal for web design, UI checks, and screen layouts

SpacingJS

4.3

Precision spacing measurement tool for web developers and designers. Hold Alt/Option key and hover over elements to measure.

PixelParallel by htmlBurger

4.7

PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers

Over.fig – Compare design to website in real time

4.6

Bridge the gap between design and code. Convert your Figma into a pixel-perfect semi-transparent overlay directly on your web page.

Screen Ruler

4.6

Use screen ruler for Chrome measure pixels on screen and as browser plugin. Get pixel ruler extension for website page dimensions.

Inspecta - visual QA and CSS editor

5.0

Inspect, compare and update CSS visually

Dimensions

5.0

You will like Dimensions as it allows you to measure elements on a page in pixels, like a page ruler.

Google apps