DevTools Tips

Measure arbitrary distances in the page

Categories: Supported by:

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.

Firefox with DevTools docked on the side. The measure tool icon is in the DevTools toolbar and has been clicked. An arbitrary area has been defined on the page and its dimensions are displayed in a tooltip