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

Question

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

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

Answer 1

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

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 2

如果您不是在寻找精确的测量结果，而是在估算范围，我使用的工具来测量Chrome上的像素而不使用Chrome扩展程序是 macOS 屏幕截图工具。

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

Here's more info

根据链接，您可以在进行测量之前在屏幕截图模式下放大显示，但我以前没有尝试过。

Answer 3

我认为没有任何扩展你可以做的最好的事情是使用带有Inspector的标尺，Computed metrics面板和命令行API来查看偏移（根据@ amza的建议）。

在以下屏幕截图中，我检查了此页面的mainbar元素。您可以看到左上角的像素偏移量，但遗憾的是，这些值未显示。您可以使用变量$0-$4访问控制台中最近检查的五个元素。在这种情况下，我使用$0，这是当前选定的offsetLeft。 offsetTop和728x1032将为您提供与您在标尺上看到的值相对应的相应值。 “计算指标”面板显示尺寸，包括填充，边框和边距值。在这种情况下，没有外部值，但您可以将其添加到您看到的Set WshShell = WScript.CreateObject("WScript.Shell") For i = 1 to 1 WshShell.SendKeys("D") Next 维度中。

像Page Ruler这样的东西会容易得多，但鉴于你的限制，这是不可能的。

Answer 4

另一种无需扩展即可测量chrome中像素的方法是：

• 通过在窗口中按F12或鼠标右键单击+检查元素来打开开发人员工具
• 在浏览器中检查元素以进行测量
• 打开“计算”选项卡，然后将鼠标悬停在块上以查看浏览中突出显示的区域。