Extensão do navegador para verificar a distância entre os elementos

2

Existe alguma extensão do navegador (qualquer navegador) usando o qual eu posso verificar a distância entre elementos na página renderizada.

Atualização:TenteiFirefoxDevToolsRuler:Mas,elenãomostraadistânciaentreoselementosvizinhos,comomostradonaimagemdereferênciaacima.Paraobterisso,tereiquedeterminarmanualmenteosvaloresexatosdeacordocomaréguae,emseguida,subtrairosvaloresdosdoiselementosvizinhos.

    
por Shailesh 09.02.2018 / 13:29

1 resposta

2

Como posso verificar a distância entre os elementos na página renderizada.

Eu uso JR Screen Ruler :

Free virtual ruler for your computer screen

This Screen Ruler is a great tool that allows you to accurately measure anything on your screen. This is especially useful when measuring graphics, web page browser sizes or whatever. Screen Ruler can display Pixels, Inches, Picas or Centimeters.

enter image description here

Fonte JR Screen Ruler

Firefox Dev Tools Ruler

enter image description here

Using the rulers

The rulers tool is useful to have around at all times. It provides a way to quickly check how tall or wide a page is, how big are the various columns or sidebars, and how much you’ve scrolled.

The rulers tool is not ON by default, so you have to enable it first. To do this:

  • open the toolbox (I often use ctrl+shift+I as a quick way to toggle the tools, but that’s just me, F12 works too, and of course right-click on the page and select “inspect element” is often an easy way to do it),
  • switch to the options panel (that’s the cog icon in the toolbar, far right, or ctrl+shift+O),
  • there are many options in there, don’t be scared, just scroll down to the “Available Toolbox Buttons” section and make sure the “Toggle rulers for the page” box is checked,
  • once done, you’ll have a nice little icon in the toolbox toolbar that you can just click to toggle the rulers.

Fonte Medindo elementos e distâncias no Firefox DevTools

Mas eu quero uma extensão de navegador!

Chrome

Dimensões - Chrome Web Store :

This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn't really work with images because there the colors change a lot pixel to pixel.

Images & HTML Elements

Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.

Régua de páginas - Chrome Web Store :

Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.

Features

  • Draw a ruler to any page and view the width, height and top, bottom, left and right position
  • Drag the edges of the ruler to resize it
  • Use the arrow keys to move and resize the ruler
  • Show guides extending from the ruler edges
  • Manually update the size and position of the ruler from the toolbar to make precision changes
  • Enable "Element Mode" to outline elements on the page as you move your mouse over them
  • Navigate through parents, children and sibling elements of any measured element

Firefox

MeasureIt - Complementos para o Firefox :

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Nota - não é compatível com o Firefox Quantum

    
por 09.02.2018 / 23:01