How to visually display css blocks for debugging

After lots of confusion and wasted effort I once learned that css also had this lines concept that everything else followed regardless of it being text or not. And that each line can be varied, be of different heights, and is the main culprit behind vertical align being so hard since everything else follows its line. Just like how things work in Ms Word.

Is there a way to show those imaginary lines when trying to do something in css?

Answer

If it’s visual representations of elements you’re looking for, nothing beats Firefox’s 3D view.

Open Firefox, press F10 to show the toolbar if necessary, go to tools, hover over web developer and get familiar with all those awesome tools.

To open the 3D view, make sure the console is visible by selecting one of the options in the web developer menu such as Web Console, then select the icon over on the right that looks like this:

Firefox 3D View Icon

It will give you a 3D view of all the elements on the page, including what’s inside what, etc.

It’s great for a visual representation of your website structure.

Here’s an example:

This Question Page, Firefox 3D View

Attribution
Source : Link , Question Author : Community , Answer Author : Dom

Leave a Comment