Wie kann ich Pixel in Chrome ohne eine Erweiterung messen?

Question

Aufgrund von Sicherheitsbeschränkungen bei der Arbeit darf ich keine Chrome-Erweiterungen installieren. Chrome hat ein Lineal, das in den Entwicklertools integriert ist, aber ich kann nicht herausfinden, wie man Start- und Endpunkte definiert, wie es ein Lineal zulässt.

Gibt es Tools oder Techniken zum Messen von Pixeln, für die keine Chrome-Erweiterung installiert werden muss?

Answer 1

Sie könnten Ihre eigenen Herrscher Funktionalität erstellen und in die Konsole einfügen. Hier ist ein einfaches Beispiel:

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

Sie es auch als snippet retten können.

Chrome-Extension-Code ist auch nur JavaScript, so dass Sie find the code used by the extension und speichern Sie diese als Snippet. Der Nachteil ist, dass der Code möglicherweise komprimiert ist und sich auf Funktionen verlässt, die normalerweise nicht im Browser verfügbar sind.

Answer 2

Ich denke, das Beste, was Sie ohne Erweiterungen tun können, ist eine Mischung aus der Verwendung des Lineals mit Inspector, dem Bereich Berechnete Metriken und der Befehlszeilen-API zum Anzeigen von Offsets (gemäß dem Vorschlag von @amza). Im folgenden Screenshot habe ich mainbar Element dieser Seite überprüft. Sie können den Pixel-Offset von oben links sehen, aber die Werte werden leider nicht angezeigt. Mit den Variablen $0-$4 können Sie auf die fünf zuletzt geprüften Elemente in der Konsole zugreifen. In diesem Fall verwende ich $0, welches das aktuell ausgewählte ist. Die Werte offsetLeft und offsetTop geben Ihnen die entsprechenden Werte, die mit denen auf dem Lineal übereinstimmen. Im Bereich "Berechnungsmetrik" werden die Dimensionen einschließlich der Füll-, Rand- und Randwerte angezeigt. In diesem Fall gibt es keine äußeren Werte, aber Sie würden diese zur 728x1032 Dimension hinzufügen, die Sie sehen, wenn es solche gibt.

Etwas wie Page Ruler wäre viel einfacher, aber angesichts Ihrer Einschränkung ist es nicht möglich.

Answer 3

Wenn Sie nicht nach genauen Maßen suchen, sondern nach einem Baseballstadien-Schätzwert, ist ein Tool, mit dem Sie Pixel in Chrome messen, ohne eine Chrome-Erweiterung zu verwenden, das macOS Bildschirmfoto-Tool.

Drücken Befehl + Shift + 4, klicken und ziehen Pixel zu messen, und drücken Sie ESC oder Rechtsklick (wenn Ihre primäre Maustaste links ist) Screenshot zu verhindern, daß genommen.

Here's more info

Laut Link können Sie offenbar während im Screenshot-Modus vergrößern vor der Messung, aber ich habe es nicht vorher versucht.