拡張機能を使用しないでChromeでピクセルを測定するにはどうすればよいですか？

職場のセキュリティ制限のため、Chrome拡張機能をインストールすることはできません。 Chromeには開発ツールに組み込まれたルーラーがありますが、ルーラーのように開始ポイントと終了ポイントを定義する方法を理解することはできません。拡張機能を使用しないでChromeでピクセルを測定するにはどうすればよいですか？

Chrome拡張機能をインストールする必要のないピクセルを測定するツールや手法はありますか？

出典

2016-06-21 adamdport

私の同僚の一部は、スクリーンショットを取り、MSペイントに貼り付け、開始点に1ピクセルの線を描き、矢印キーでその線をエンドポイントに達するまで（カウント中に）移動します。 > _ < – 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としてそれを救うことができます。

クロム拡張コードもJavaScriptであるため、find the code used by the extensionとすることができます。これをスニペットとして保存してください。ここでの欠点は、コードが圧縮されていて、ブラウザで通常利用できない機能に依存していることです。

出典

2016-06-22 11:49:07

ああ、SVGラインオーバーレイを作成することは、私が考慮に入れなかったもう一つの選択肢です。良いですね。 –

エクステンションなしでできることは、インスペクタ、計算メトリックパネル、およびコマンドラインAPIでルーラを使用してオフセットを表示する方法（@ amzaの提案に従って）が混在することです。

次のスクリーンショットでは、私はこのページのmainbar要素を調べました。左上からピクセルオフセットを見ることができますが、値は残念ながら表示されません。変数$0-$4を使用して、コンソールで最後に検査された5つの要素にアクセスできます。この場合は、現在選択されている$0を使用します。 offsetLeftとoffsetTopは、ルーラーに表示されているものと一致する値を返します。 [計算メトリック]パネルには、パディング、境界線、およびマージンの値を含むディメンションが表示されます。この場合、外側の値はありませんが、存在する場合は、表示される728x1032ディメンションに値を追加します。

Page Rulerのようなものは、はるかに簡単ですが、あなたの制限を与えてもそれは不可能です。