如何在沒有擴展名的情況下測量Chrome中的像素？

由於工作安全限制，我不允許安裝Chrome擴展程序。 Chrome有一個內置於開發者工具中的標尺，但我無法弄清楚如何定義標尺允許的開始和結束點。如何在沒有擴展名的情況下測量Chrome中的像素？

是否有任何測量不需要安裝Chrome擴展的像素的工具或技術？

2016-06-21 adamdport

我的一些同事拍攝屏幕截圖，將它們粘貼到MS Paint中，在起點處繪製1px線條，然後用箭頭鍵移動該線條（直到計數），直到它們到達端點。 > _ < – adamdport

你可以使用控制檯，並採取偏移之間的差異？ 'footer.offsetTop - header.offsetTop'。似乎有點繁瑣，雖然 – amza

你可以創建自己的標尺功能，並將其粘貼到控制檯。以下是一個基本示例：

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並將其另存爲片段。這裏的缺點是代碼可能被壓縮，並依賴於瀏覽器通常不可用的功能。

來源

2016-06-22 11:49:07

啊，是的，創建一個SVG線覆蓋是另一個我忘了考慮的選項。好一個。 –

我認爲沒有任何擴展可以做的最好的是將標尺與Inspector，計算度量面板和命令行API一起使用來查看偏移量（按照@ amza的建議）。

在下面的截圖中，我檢查了此頁面的元素mainbar。您可以看到左上角的像素偏移量，但不幸的是這些值不會顯示。您可以使用變量$0-$4訪問控制檯中最近五次檢查的元素。在這種情況下，我使用$0，這是當前選定的一個。 offsetLeft和offsetTop會爲您提供與您在標尺上看到的相對應的值。計算指標面板顯示尺寸，包括填充，邊框和邊距值。在這種情況下，沒有外部值，但是您可以將這些值添加到您看到的728x1032維度中。

類似Page Ruler會容易得多，但考慮到你的限制，這是不可能的。