Measure arbitrary distances in the page

Do you need to find out the dimensions of any element or area in the page? Or perhaps the distance between two things?

If you do, Firefox DevTools may be the right tool for the job.

First, enable the tool, you only need to do this once:

1. Open DevTools.
2. Open the Settings panel by pressing F1.
3. Scroll down to the Measure a portion of the page.
4. The ruler icon now appears in the DevTools toolbar.

Whenever you need to measure something in the page:

1. Click the ruler icon in the toolbar.
2. Click and drag in the page to start measuring an arbitrary area.
3. You can also resize the measured area by dragging the handles after releasing the mouse button.
4. To measure something else, just start click and dragging somewhere else.
5. Click the ruler icon in the toolbar again to stop the tool.