How can I measure pixels in Chrome without an extension?

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.


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.