Как измерить пиксели в Chrome без расширения?

Из-за ограничений безопасности на работе мне не разрешено устанавливать расширения Chrome. В Chrome есть линейка, встроенная в инструменты разработчика, но я не могу понять, как определить начальную и конечную точки так, как позволит линейка.

Существуют ли какие-либо инструменты или методы для измерения пикселей, которые не требуют установки расширения Chrome?

 adamdport21 июн. 2016 г., 22:55
Некоторые из моих коллег делают снимки экрана, вставляют их в MS Paint, рисуют линию в 1 пиксель в начальной точке и перемещают эту линию с помощью клавиш со стрелками (при подсчете), пока не достигнут конечной точки. > _ <
 amza21 июн. 2016 г., 23:00
Вы могли бы использовать консоль и взять разницу между смещениями?footer.offsetTop - header.offsetTop, Кажется немного утомительным, хотя

Ответы на вопрос(4)

Если вы ищете не точные измерения, а приблизительную оценку, я использую инструмент для измерения пикселей в Chrome без использования расширения Chrome.Macos скриншот

НажмитеCommand + shift + 4нажмите и перетащите, чтобы измерить пиксели, и нажмитеESC или щелкните правой кнопкой мыши (если левая - ваша основная кнопка мыши), чтобы сделать снимок экрана.

Вот больше информации

Согласно ссылке, вы можете увеличить изображение в режиме скриншота, прежде чем проводить измерения, но я раньше не пробовал.

 Michael Lossagk17 авг. 2019 г., 18:32
Это отличное и простое решение, спасибо за это

Я думаю, что лучшее, что вы можете сделать без каких-либо расширений, - это использовать линейку с Inspector, панель Computed metrics и API командной строки для просмотра смещений (согласно предложению @ amza).

На следующем скриншоте я проверилmainbar элемент этой страницы. Вы можете видеть смещение в пикселях от верхнего левого угла, но значения, к сожалению, не отображаются. Вы можете получить доступ к пяти самым последним проверенным элементам в консоли, используя переменные$0-$4, В этом случае я использую$0, который является текущим выбранным.offsetLeft а такжеoffsetTop даст вам соответствующие значения, которые соответствуют тому, что вы видите на линейке. Панель «Вычислительные показатели» показывает размеры, включая значения отступов, границ и полей. В этом случае нет внешних значений, но вы бы добавили их к728x1032 измерение вы видите, если бы были.

Что-то вродеPage Ruler было бы намного проще, но учитывая ваши ограничения, это невозможно.

 Gideon Pyzer22 июн. 2016 г., 16:40
@adamdport Да, в этом случае вам лучше использовать инструмент для рисования, как и другие предложения.
 adamdport22 июн. 2016 г., 16:38
Я часто пытаюсь измерить базовую часть текстовых компонентов, что делает этот подход гораздо менее осуществимым. Спасибо хоть!

Еще один способ измерить пиксель в Chrome без расширения:

Откройте инструмент разработчика, нажав F12 в окне или щелкнув правой кнопкой мыши + элемент проверкиПроверьте элемент в браузере, чтобы измеритьОткройте вкладку Computed и наведите курсор мыши на блоки, чтобы увидеть выделенную область в окне просмотра.

 Carl18 апр. 2019 г., 13:02
Это самый быстрый вариант
Решение Вопроса

Вы можете создать собственную функциональность линейки и вставить ее в консоль. Вот основной пример:

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, так что вы можетенайти код, используемый расширением и сохранить это как фрагмент. Недостатком здесь является то, что код может быть сжат и полагаться на функции, которые обычно не доступны в браузере.

 Gideon Pyzer22 июн. 2016 г., 16:38
Ах да, создание оверлея SVG - еще один вариант, который я забыл рассмотреть. Хороший.
 Matt Zeunert15 мар. 2018 г., 13:30
@DavidNouls Я только что попробовал код снова в Chrome, и он отлично работает для меня ... Есть сообщения об ошибках? Можете ли вы проверить страницу? В нижней части тега body должно быть что-то вроде этого:<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>
 David Nouls15 мар. 2018 г., 09:53
Я вижу расстояние, которое регистрируется в консоли. Но я не вижу красной линии (которая, я полагаю, должна быть показана). Есть идеи, что может быть причиной этого?

Ваш ответ на вопрос