logo.svg

Debugging CSS Before Debugging Tools

posts/debugging-css-before-debugging-tools/hero.png

Firebug changed my front-end development career, thanks Joe Hewitt for creating it. Before Firebug was around there wasn't much for debugging your code. I remember years ago working on an e-commerce website and having to print out all the code, on physical paper, so I could like match up all the divs. Keep in mind we were using Notepad ++ back then and there wasn't really any other good options. One of the tricks that we did was highlighting the elements with wildcards. You also have to remember we didn't have much for standards back then, shit inline CSS was still acceptable. This saved me more time than I can count.

Visualize HTML Elements

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 1px solid blue }
* * * * { outline: 1px solid purple }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 2px dotted green }
* * * * * * * { outline: 2px dotted blue }
* * * * * * * * { outline: 2px dotted purple }

All you had to do is include the code snippet above into your CSS. Save, refresh, and start debugging.

Oh yeah, do you remember those crazy huge dropdown menus we used back in the day. Those were a complete pain in the ass. This was good for that too. Before we had SCSS, our CSS used to look like this.

.mainnav ul li ul li ul li ul li a{
}

Examples from the wild

I spent the last 30 minutes trying to find old sites that had poorly written HTML and it was shockly harder than I thought. Here a few, not so great, examples.

posts/debugging-css-before-debugging-tools/kennedysgarage.png
My home page
posts/debugging-css-before-debugging-tools/dribbble.png
dribbble.com/about

Codepen Example

Here it is in full effect.

See the Pen Visualize structure of HTML by Kennedy (@kennedysgarage) on CodePen.



comments powered by Disqus