How can I measure pixels in Chrome without an extension?

Question

Due to security limitations at work, I am not allowed to install Chrome extensions. Chrome has a ruler built in to the developer tools, but I can't figure out how to define start and end points like a ruler would permit.

Are there any tools or techniques for measuring pixels that don't require installing a Chrome extension?

Some of my coworkers take screenshots, paste them into MS Paint, draw a 1px line at the start point, and move that line with arrow keys (while counting) until they reach the endpoint. >_ — adamdport, Jun 21 '16 at 20:55
You could use the console and take the difference between offsets? `footer.offsetTop - header.offsetTop`. Seems a little tedious though — amza, Jun 21 '16 at 21:00
I would also recommend fighting to fix the "security" policy of not being able to install tools you need. If you're already a developer, you're creating trusted code for other people to use so you better be trusted in that company already! — Mikko Rantalainen, Nov 11 '22 at 13:35

score 56 · Accepted Answer · edited May 23 '17 at 11:47

You could create your own ruler functionality and paste it into the console. Here's a basic example:

var fromX, fromY;
var svg = document.createElementNS ('http://www.w3.org/2000/svg',"svg");
svg.setAttribute("style", "position: absolute; top:0;left:0;height: " + document.body.clientHeight + "px;width: 100%");
var line = document.createElementNS('http://www.w3.org/2000/svg','line');
line.setAttribute("style", "stroke-width: 4; stroke: red");

svg.appendChild(line);
document.body.appendChild(svg);

document.body.addEventListener("mousedown", function (e) {
  fromX = e.pageX;
  fromY = e.pageY;
});

document.body.addEventListener("mousemove", function (e) {
  if (fromX === undefined) {
    return;
  }

  line.setAttribute("x1", fromX);
  line.setAttribute("x2", e.pageX);
  line.setAttribute("y1", fromY);
  line.setAttribute("y2", e.pageY);

  console.log(
    [fromX, fromY], " to ", [e.pageX, e.pageY], "Distance:",
    Math.sqrt(Math.pow(fromX - e.pageX, 2) + Math.pow(fromY - e.pageY, 2))
  );
});

document.body.addEventListener("mouseup", function (e) {
  fromX = undefined;
  fromY = undefined;
});

You could also save it as a snippet.

Chrome extension code is also just JavaScript, so you can find the code used by the extension and save that as a snippet. The downside here is that the code might be compressed, and rely on features that aren't normally available in the browser.

Ah yes, creating an SVG line overlay is another option I forgot to consider. Nice one. — Gideon Pyzer, Jun 22 '16 at 14:38
I can see the Distance being logged in the console. But I don't see the red line (which I assume should be shown). Any idea what could be causing this ? — David Nouls, Mar 15 '18 at 08:53
@DavidNouls I just tried the code again in Chrome, and it works fine for me... Any error messages? Can you inspect the page? At the bottom of the body tag there should be something like this: `` — Matt Zeunert, Mar 15 '18 at 12:30

score 40 · Answer 2 · edited Nov 10 '17 at 06:15

40

If you are not looking for exact measurements, but a ballpark estimate, a tool I use to measure pixels on Chrome without using a Chrome extension is the macOS screenshot tool.

Press Command + shift + 4, click and drag to measure pixels, and press ESC or right-click (if left is your primary mouse button) to prevent screenshot from being taken.

Here's more info

According to link, you can zoom in apparently while in screenshot mode before taking a measurement, but I haven't tried it before.

edited Nov 10 '17 at 06:15

Regolith

2,944
9
33
50

answered Nov 10 '17 at 04:42

George.

860
12
15

1

That's a great and simple solution, thanks for that – Michael Aug 17 '19 at 16:32
2

And if you don't want the screenshot to be saved anywhere (like your Desktop), you can use *Command + **Control** + Shift + 4* which will save any screenshot just to your clipboard. That way there's no need the press ESC or right-click to prevent the screenshot from being taken. – stwr667 Mar 07 '20 at 06:03

score 9 · Answer 3 · answered Feb 08 '19 at 07:26

9

Another way to measure pixel in chrome without extension is:

Open Developer tool by pressing F12 in window or mouse right click + inspect element
Inspect element in the browser to measure
Open Computed tab and mouse over on blocks to see highlighted area in browse.

answered Feb 08 '19 at 07:26

Sunil

411
5
12

1

This is by far the quickest option – Carl Apr 18 '19 at 11:02
1

I'm often trying to measure to/from the baseline of text components which makes this approach much less feasible. Thanks though! – adamdport Aug 16 '20 at 18:49

score 3 · Answer 4 · answered Jun 21 '16 at 21:53

I think the best you can do without any extensions is a mixture of using the ruler with Inspector, the Computed metrics panel, and the Command Line API to view offsets (as per @amza's suggestion).

In the following screenshot, I have inspected mainbar element of this page. You can see the pixel offset from the top-left, but the values aren't shown unfortunately. You can access the five most recently inspected elements in the Console using the variables $0-$4. In this case, I use $0, which is the currently selected one. The offsetLeft and offsetTop will give you the corresponding values that match what you see on the ruler. The Computing metrics panel shows the dimensions, including the padding, border and margin values. In this case, there's no outer values, but you would add those on to the 728x1032 dimension you see if there were.

Something like Page Ruler would be a lot easier, but given your limitation it's not possible.

I'm often trying to measure to/from the baseline of text components which makes this approach much less feasible. Thanks though! — adamdport, Jun 22 '16 at 14:38
@adamdport Yes, in that case you are better off with a drawing tool like other suggestion. — Gideon Pyzer, Jun 22 '16 at 14:40

How can I measure pixels in Chrome without an extension?

4 Answers4

Linked