Firefox developer tools? highlighting page layout

General Web Dev
1

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

2

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

1 Like
3

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

4

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?

5

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
6

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
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.