如何在没有扩展名的情况下测量 Chrome 中的像素？

Question

由于工作中的安全限制，我无法安装 Chrome 扩展程序。 Chrome 在开发者工具中内置了一个标尺，但我不知道如何像标尺允许的那样定义起点和终点。

是否有不需要安装 Chrome 扩展程序即可测量像素的工具或技术？

Answer 1

我认为在没有任何扩展的情况下，您可以做的最好的事情是将标尺与 Inspector、Computed metrics 面板和命令行 API 结合使用来查看偏移量（根据@amza 的建议）。

在下面的屏幕截图中，我检查了此页面的 mainbar 元素。您可以看到从左上角开始的像素偏移，但遗憾的是没有显示这些值。您可以使用变量 [=11=]- 访问控制台中最近检查的五个元素。在这种情况下，我使用 [=12=]，这是当前选择的一个。 offsetLeft 和 offsetTop 将为您提供与您在标尺上看到的相匹配的相应值。计算指标面板显示尺寸，包括填充、边框和边距值。在这种情况下，没有外部值，但您可以将它们添加到 728x1032 维度中，如果有的话。

Page Ruler 之类的东西会容易得多，但鉴于您的限制，这是不可能的。

Answer 2

您可以创建自己的标尺功能并将其粘贴到控制台中。这是一个基本示例：

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;
});

您也可以将其另存为 snippet。

Chrome 扩展代码也只是 JavaScript，因此您可以 find the code used by the extension 并将其保存为片段。这里的缺点是代码可能会被压缩，并且依赖于浏览器中通常不可用的功能。

Answer 3

如果您不是在寻找精确的测量值，而是在寻找一个大概的估计值，我用来在 Chrome 上测量像素而不使用 Chrome 扩展的工具是 macOS截图工具。

按Command + shift + 4，单击并拖动以测量像素，然后按ESC或单击鼠标右键（如果左侧是您的主要鼠标按钮）以防止截取屏幕截图。

Here's more info

根据link，您可以在截屏模式下明显放大后再进行测量，但我以前没有尝试过。

Answer 4

另一种测量 chrome 像素的方法是：

在 window 中按 F12 或鼠标右键单击 + 检查元素打开 Developer tool
在浏览器中检查要测量的元素
打开“计算”选项卡并将鼠标悬停在块上以在浏览中查看突出显示的区域。

如何在没有扩展名的情况下测量 Chrome 中的像素？

How can I measure pixels in Chrome without an extension?

google-chrome

google-chrome-devtools

pixel

measurement