Firefox developer tools? highlighting page layout

Hi,
been away from web dev for a couple of years now and trying to remember a bunch of things. I remember i had either an add on or it was part of firefox for developers to highlight the page structure. I’m sure it put a border around all of the block level elements with sizes etc? unless i dreamed it.

Does this still exist I’ve looked at various add ons and in firefox but i can’t find what i think existed?

any help appreciated.

thanks

If it’s the developer tools you’re after, just prod F12.

1 Like

I remembered that much :slight_smile:

Unless i can’t see the correct button to hit I am not finding the ability to outline everything at once. I can highlight individual divs etc as expected. Another thing came back to my mind as i remember the tool I used to use allowed you to view the page in 3d and see the layering of the blocks.

thanks

oh doesn’t look like it exists anymore :frowning: https://developer.mozilla.org/en-US/docs/Tools/3D_View was really useful back in the day.

Any ideas if being able to highlight all the divs is still available somehow?

Does the Web Developer extension do what you want?

https://addons.mozilla.org/en-GB/firefox/addon/web-developer

It has an option to outline all block-level elements, but not specifically divs.

1 Like

Ah yes perfect thanks. I’d briefly looked at that but it didn’t give much information. Gave it a go and it has the bits I was looking for, probably even more.

Now I just have to remember how to code :slight_smile:

1 Like