Firefox Dev Tool that shows page layout

Hi. I’m getting back into web development after a few years off.

There used to be a tool in Firefox where you could do a simple keystroke and then hover over different parts of your web page, and off to the side you would see boxes showing you things like the padding and size of elements.

I am using Firefox Quantum 69 currently on my development box and would like to get that feature back so I can figure out my old html and css.

You can get a “Firefox developer edition” browser.

I don’t follow you. Tell me more…

The Firefox Developer Edition is a version of Firefox that’s tailored for web developers. It includes:

  • the latest Firefox features : Firefox Developer Edition replaces the old Aurora channel.
    • Each new release includes features which have been stabilized via nightly builds.
    • New features enter the Firefox Beta channel six weeks before being released
    • New features are stabilized for 12 weeks before appearing in the released version of Firefox.
  • a separate developer profile : this means you can easily run the Developer Edition alongside your release or Beta version of Firefox.
  • experimental developer tools : we’ll include experimental tools that aren’t yet ready for production.
  • preferences tailored for web developers : we’ve set default preference values tailored for web developers. For example, chrome and remote debugging are enabled by default in the Developer Edition.
  • a distinct theme : this includes quicker access to the developer tools.

So it is an entirely different browser then huh?

Is Firefox still the preferred browser for doing web development in?