Ferramenta para medir Largura x Altura da tela do Navegador

1. Ferramenta para medir Largura x Altura da tela do Navegador

jeanolinux
(usa Ubuntu)

Enviado em 08/11/2022 - 11:40h

Bom dia!
Gostaria de saber se existe alguma ferramenta para linux que permite medir a largura X altura dos elementos na janela do browser!
Eu uso o visualbug do chrome, porém muito ruim tem essa ferramenta que é de mac snap pixel 2 porém não serve para linux, gostaria de alguma ferramenta que ao pressionar algumas teclas de atalho já consigo ter a diemnsões.
Obrigado.
Jean.

0 0

Quote

2. Re: Ferramenta para medir Largura x Altura da tela do Navegador

msoliver
(usa Debian)

Enviado em 08/11/2022 - 13:18h

Boa tarde.
Com javascript você obtém essas informações.
______________________________________________________________________
Att.: Marcelo Oliver
______________________________________________________________________

0 0

Quote

3. Re: Ferramenta para medir Largura x Altura da tela do Navegador

msoliver
(usa Debian)

Enviado em 12/11/2022 - 23:44h

Montei uma página, que, ao clicar no elemento, e mostrado:
width×height.
Segue:

<!doctype html>

<head>

<meta charset="utf-8">

<style>

body{margin:0;background:#e0e0e0;}

section{padding:0mm 5mm;width:90%;height:auto;background:white;box-shadow: 0 0.5mm 2mm #0000004d;margin:1em auto 0em;cursor:crosshair;border-radius:12px;}

#id02, #id05{text-align:center;}

button{font-size: x-large;}

#msg{width:fit-content;margin:5px auto;border:2px solid red;padding:0.5em;}

.blocktext {margin-left:auto;margin-right:auto;width:90%}

input[type=color]{width:25%;height:3em;}

input[type=radio] {height:1.75em;width:1.75em;cursor:pointer}

span{line-height:0.75em;vertical-align: text-top;}

</style>

</head>

<body>

<section id='id01'>

<div id='id02'>

<br>

<button id='id03'>Botão 01</button>

<button id='id04'>Botão 02</button>

<h1 id='xx'>Click no elemento para ver "width×height", abaixo.</h1>

<div id='msg'>Elemento, Id<br>width × height</div>

</div>



<h2 id='id05'>Elemento <h2> TEXTO</h2>

<p id='id06' class="blocktext">Um Elemento <p>, uma linha</p>

<p id='id07'>Outro elemento <p>, linha mais "larga".</p>

<span id='id08'>Elemento <span>.</span>



<div id='paletacor' style='display:flex;align-items:center;justify-content:space-evenly;border:2px solid;'>

<div style="margin:.5em;">

<input type="radio" id="corf"><span id='id_fundo'>Fundo</span><br>

<input type="radio" id="cort"><span id='id_texto'>Texto</span>

</div>

<input type="color" id="color" value="#ffff00">

</div>

<br>

</section>



<script>

const 

d = document,

text = '0123456789 ABCDEFGHIJKLMNOPKRSTUVWXYZ abcdefghijklmnopqrstuvxywz\\n<br>',

resp=d.querySelector('#msg'),

saida=d.querySelector('#id06');

addEventListener("load", start, false);

d.addEventListener("click", func_click);



function start(){

saida.innerHTML='';

	for(let n=0;n<=13;n++){

		saida.innerHTML += n.toString().padStart(2,0)+' => '+text;

		dbch = d.body.clientHeight;

	}

}



function func_click(e){

let el=e.target, eid=el.id,

ew=(el.clientWidth||e.srcElement.offsetWidth),

eh=(el.clientHeight||e.srcElement.offsetHeight);

resp.innerHTML="Elem: <"+el.nodeName+"> ID: "+eid+"<br>W×H: "+ew+"×"+eh+'<br>';

}



</script>

</body>

</html>

Quem fornece as informações, é: function func_click(e)[/b

______________________________________________________________________
[b]Importante:
lynx --dump https://www.vivaolinux.com.br/termos-de-uso/ | sed -nr '/^[ ]+Se/,/dou.$/p'
______________________________________________________________________
Nota de esclarecimento:
O comando: ACIMA, faz parte da minha assinatura.
Att.: Marcelo Oliver
______________________________________________________________________

0 0

Quote