如何在不使用扩展程序的情况下在Chrome中测量像素？

Question

如何在不使用扩展程序的情况下在Chrome中测量像素？

google-chromegoogle-chrome-devtoolspixelmeasurement

35

由于工作安全限制，我不被允许安装Chrome扩展。Chrome开发者工具里有一个尺子工具，但我无法弄清如何定义起点和终点，就像尺子所允许的那样。

有没有既不需要安装Chrome扩展又能测量像素的工具或技术？

- adamdport

2

我的一些同事会截屏，然后将其粘贴到 MS Paint 中，在起始点处画一根 1px 的线，然后使用箭头键（同时计数）移动该线，直到到达终点。>_< - adamdport

你可以使用控制台并计算偏移量之间的差异吗？footer.offsetTop - header.offsetTop。不过这似乎有点繁琐。 - amza

我还建议努力修复“安全”政策，以便能够安装所需的工具。如果您已经是开发人员，则正在为其他人创建可信代码，因此您在公司中应该是值得信赖的！ - Mikko Rantalainen

4个回答

40

如果你只是需要一个大致估计而不需要精确的度量，那么我使用的一个在Chrome上测量像素而无需使用Chrome扩展的工具是macOS截图工具。

按下Command + shift + 4，单击并拖动以测量像素，按ESC或右键单击（如果左键是您的主鼠标按钮），以防止截图被拍摄。

这里提供更多信息。

根据链接所述，您可以在截图模式下放大以便于测量，但我之前从未尝试过。

- George.

1

那是一个很棒且简单的解决方案，谢谢你。 - Michael

2

如果您不想将屏幕截图保存在任何地方（比如桌面），您可以使用 Command + Control + Shift + 4，这样会将截图保存到剪贴板中。这样就不需要按ESC或右键来防止截图被拍摄了。 - stwr667

9

在Chrome中测量像素的另一种方法是：

按下窗口中的F12或鼠标右键单击 + 检查元素来打开开发者工具
在浏览器中检查元素以进行测量
打开计算选项卡，并将鼠标悬停在块上，以在浏览器中查看高亮区域。

- Sunil

1

这绝对是最快的选择。 - Carl

1

我经常尝试测量文本组件的基线，这使得这种方法变得不太可行。不过还是谢谢！ - adamdport

3

我认为在没有任何扩展的情况下，最好的方法是混合使用检查器中的标尺、计算度量面板和命令行 API 来查看偏移量（根据 @amza 的建议）。在下面的截图中，我已经检查了此页面的 mainbar 元素。您可以看到从左上角的像素偏移量，但遗憾的是值没有显示。您可以使用变量 $0-$4 在控制台中访问最近检查的五个元素。在这种情况下，我使用 $0，它是当前选定的元素。offsetLeft 和 offsetTop 将为您提供与标尺上所见相匹配的相应值。计算度量面板显示尺寸，包括填充、边框和边距值。在这种情况下，没有外部值，但如果有的话，您将把它们添加到您看到的 728x1032 尺寸上。类似于 Page Ruler 的东西会更容易，但考虑到您的限制，这是不可能的。

- Gideon Pyzer

2

我经常尝试测量文本组件的基线，这使得这种方法变得不太可行。不过还是谢谢！ - adamdport

@adamdport 是的，在那种情况下，你最好使用像其他建议一样的绘图工具。 - Gideon Pyzer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Zeunert · Accepted Answer

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

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

您也可以将其保存为片段。

Chrome扩展程序代码本质上是JavaScript，因此您可以找到扩展程序使用的代码并将其保存为片段。不足之处在于，该代码可能会被压缩，并依赖于通常在浏览器中不可用的功能。