Как измерить пиксели в 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

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

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

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

Answer 3

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

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

Here's more info

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