How can I measure pixels in Chrome without an extension?

Question

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.

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

Answer 1

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; }); 

You could also save it as a snippet.

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.

Answer 2

If you are not looking for exact measurements, but a ballpark estimate, a tool I use to measure pixels on Chrome without using a Chrome extension is the macOS screenshot tool.

Press Command + shift + 4, click and drag to measure pixels, and press ESC or right-click (if left is your primary mouse button) to prevent screenshot from being taken.

Here's more info

According to link, you can zoom in apparently while in screenshot mode before taking a measurement, but I haven't tried it before.