How can I measure pixels in Chrome without an extension?

问题

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?

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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.

来源：https://stackoverflow.com/questions/37954379/how-can-i-measure-pixels-in-chrome-without-an-extension

标签

google-chrome

google-chrome-devtools

pixel

measurement