由于工作中的安全限制，我不能安装 Chrome 扩展程序。 Chrome 在开发人员工具中内置了一个标尺，但我不知道如何像标尺允许的那样定义起点和终点。
是否有无需安装 Chrome 扩展程序即可测量像素的工具或技术？
【问题讨论】：
footer.offsetTop - header.offsetTop。虽然看起来有点乏味
标签： google-chrome google-chrome-devtools pixel measurement
您可以创建自己的标尺功能并将其粘贴到控制台中。这是一个基本示例：
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 并将其保存为 sn-p。这里的缺点是代码可能会被压缩，并且依赖于浏览器中通常不可用的功能。
【讨论】：
<svg style="position: absolute; top:0;left:0;height: 505px;width: 100%"><line style="stroke-width: 4; stroke: red" x1="204" x2="756" y1="316" y2="156"></line></svg>
如果您不是在寻找精确的测量值，而是一个大致的估计值，我用来在 Chrome 上测量像素而不使用 Chrome 扩展程序的工具是 macOS 屏幕截图工具。
按 Command + shift + 4，单击并拖动以测量像素，然后按 ESC 或右键单击（如果左键是您的主鼠标按钮）以防止屏幕截图从被采取。
根据链接，在进行测量之前，您可以在屏幕截图模式下明显放大，但我之前没有尝试过。
【讨论】：
我认为您可以在没有任何扩展的情况下做的最好的事情是将标尺与 Inspector、Computed metrics 面板和命令行 API 混合使用来查看偏移量（根据 @amza 的建议）。
在以下屏幕截图中，我检查了此页面的mainbar 元素。您可以看到左上角的像素偏移量，但遗憾的是没有显示这些值。您可以使用变量$0-$4 访问控制台中最近检查的五个元素。在这种情况下，我使用$0，也就是当前选中的那个。 offsetLeft 和 offsetTop 将为您提供与您在标尺上看到的值相匹配的相应值。计算指标面板显示维度，包括填充、边框和边距值。在这种情况下，没有外部值，但您可以将它们添加到 728x1032 维度，如果有的话。
Page Ruler 之类的东西会容易得多，但鉴于您的限制，这是不可能的。
【讨论】：