web-dev-qa-db-ja.com

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

職場でのセキュリティ制限のため、Chrome拡張機能をインストールすることはできません。 Chromeには開発者ツールに組み込まれたルーラーがありますが、ルーラーが許可するように開始点と終了点を定義する方法がわかりません。

Chrome拡張機能のインストールを必要としないピクセルを測定するためのツールまたは技術はありますか？

google-chromegoogle-chrome-devtoolspixelmeasurement
15
adamdport

独自のルーラー機能を作成して、コンソールに貼り付けることができます。基本的な例を次に示します。

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にすぎないため、 拡張機能で使用されるコードを見つける をスニペットとして保存できます。ここでの欠点は、コードが圧縮される可能性があり、ブラウザでは通常利用できない機能に依存することです。

26
Matt Zeunert

正確な測定値ではなく、概算の推定値を探している場合、Chrome拡張子を使用せずにChromeのピクセルを測定するために使用するツールはmacOSですスクリーンショットツール。

Command + shift + 4を押し、クリックしてドラッグしてピクセルを測定し、[〜＃〜] esc [〜＃〜]または右クリック（左の場合はメインのマウスボタン）、スクリーンショットが撮影されないようにします。

詳細はこちら

リンクによると、スクリーンショットモードで測定を行う前に、明らかにズームインすることができますが、私は試したことはありません。

8
George.

拡張機能なしでできる最善の方法は、ルーラーとインスペクター、計算指標パネル、およびコマンドラインAPIを使用してオフセットを表示することです（@amzaの提案に従って）。

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

Page Ruler のようなものははるかに簡単ですが、制限があるため不可能です。

Console Ruler

2
Gideon Pyzer

chrome拡張子なしでピクセルを測定する別の方法は次のとおりです。

  • ウィンドウでF12を押すか、マウスを右クリックして開発者ツールを開き、要素を検査します
  • ブラウザーの要素を調べて測定する
  • [計算済み]タブを開き、ブロックの上にマウスを移動して、参照で強調表示された領域を確認します。

for example see attached screen here

1
Sunil