Из-за ограничений безопасности на работе мне не разрешено устанавливать расширения Chrome. У Chrome есть линейка, встроенная в инструменты разработчика, но я не могу понять, как определить начальные и конечные точки, как это допустила бы линейка.
Существуют ли какие-либо инструменты или методы для измерения пикселей, которые не требуют установки расширения Chrome?
Вы можете создать свою собственную линейку и вставить ее в консоль. Вот базовый пример:
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, поэтому вы можете найти код, используемый расширением, и сохранить его как фрагмент. Недостатком здесь является то, что код может быть сжат и опираться на функции, которые обычно не доступны в браузере.
Если вы не ищете точные измерения, а оценку шара, инструментом, который я использую для измерения пикселей в Chrome без использования расширения Chrome, является инструмент macOS.
Нажмите Command + shift + 4, щелкните и перетащите, чтобы измерить пиксели, и нажмите ESC или щелкните правой кнопкой мыши (если слева - основная кнопка мыши), чтобы предотвратить снятие снимков экрана.
Согласно ссылке, вы можете увеличивать видимость, пока находитесь в режиме скриншота, прежде чем принимать измерения, но я не пробовал это раньше.
Я думаю, что лучшее, что вы можете сделать без каких-либо расширений, - это смесь использования линейки с Inspector, панель Computed metrics и API командной строки для просмотра смещений (согласно предложению @amza).
На следующем скриншоте я проверил элемент mainbar этой страницы. Вы можете видеть смещение пикселей из верхнего левого угла, но значения пока не показаны. Вы можете получить доступ к пяти последним проверенным элементам в консоли с помощью переменных $0-$4. В этом случае я использую $0, который является выбранным в данный момент. offsetLeft и offsetTop предоставят вам соответствующие значения, соответствующие тому, что вы видите на линейке. На панели "Показатели вычислений" отображаются размеры, включая значения отступов, границ и полей. В этом случае нет внешних значений, но вы должны добавить их в измерение 728x1032, которое вы видите, если оно есть.
Что-то вроде Page Ruler было бы намного проще, но с учетом ваших ограничений это было невозможно.
Фактически в Chrome, когда вы наводите указатель на элемент с инспектором, вы можете увидеть размеры в всплывающей подсказке:
Надеюсь, это поможет кому-то.