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.
Fonte JR Screen Ruler
Firefox Dev Tools Ruler
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