如何在没有扩展程序的情况下测量Chrome中的像素? [英] How can I measure pixels in Chrome without an extension?

问题描述

由于工作中的安全限制，不允许我安装Chrome扩展程序. Chrome在开发人员工具中内置了标尺，但是我不知道如何像标尺所允许的那样定义起点和终点.

Due to security limitations at work, I am not allowed to install Chrome extensions. Chrome has a ruler built in to the developer tools, but I can't figure out how to define start and end points like a ruler would permit.

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

Are there any tools or techniques for measuring pixels that don't require installing a Chrome extension?

推荐答案

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

You could create your own ruler functionality and paste it into the console. Here's a basic example:

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，因此您可以找到扩展程序使用的代码并将其另存为摘要.不利之处在于代码可能会被压缩，并且依赖于浏览器中通常不具备的功能.

Chrome extension code is also just JavaScript, so you can find the code used by the extension and save that as a snippet. The downside here is that the code might be compressed, and rely on features that aren't normally available in the browser.

这篇关于如何在没有扩展程序的情况下测量Chrome中的像素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！