如何衡量在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扩展是MacOS的截图工具。

按Command + Shift + 4，单击并拖动来衡量像素，然后按ESC键或单击鼠标右键（如果离开是你的主鼠标按钮），以防止从截图被采取。

Here's more info

据链接，你可以放大明显，而在屏幕截图模式进行测量之前，但我还没有尝试过。

Answer 3

我认为你可以没有任何扩展做的最好的是用尺子检查，将计算的量度面板，和命令行API来查看偏移（按@ amza的建议）的混合物。

在下面的截图中，我考察这个页面的mainbar元素。你可以看到像素从左上角的偏移，但值未不幸中。您可以访问使用变量$0-$4在控制台的五个最近检查的元素。在这种情况下，我使用$0，这是当前选择之一。该offsetLeft和offsetTop会给你匹配你的尺子看到相应的值。计算度量面板显示尺寸，包括填料，边界和余量的值。在这种情况下，没有外在价值，但你会在添加这些你看看是否有该728x1032尺寸。

像Page Ruler东西会轻松很多，但考虑到你的限制，这是不可能的。

Answer 4

另一种方法来测量铬像素没有扩展名是：

• 通过在窗口或鼠标按下F12键打开Developer工具右击+检查元素
• 检查元素在浏览器测量
• 打开已计算选项卡，鼠标移到块看到浏览高亮区域。