Debugging CSS Before Debugging Tools

Kennedy
Kennedy
Sep 13, 2016 · 2 min read

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.

Codepen Example

Here it is in full effect.

Originally published at localhost on September 13, 2016.

Kennedys Garage

Thoughts and lessons learned from Kennedy

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store