如何在没有扩展名的情况下测量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;
});

您也可以将其另存为代码段.

Chrome扩展程序代码也只是JavaScript,因此您可以找到扩展程序使用的代码并将其另存为代码段.这里的缺点是代码可能被压缩,并依赖于浏览器中通常不可用的功能.

Answer 2

如果您不是在寻找精确的测量值，而是一个大概的估算值，那么我不使用Chrome扩展程序即可在Chrome上测量像素的工具是macOS屏幕截图工具。

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

这是更多信息

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

Answer 3

在没有扩展的情况下测量 chrome 中的像素的另一种方法是：

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