The console.log() of css

Debugging CSS layouts

#shorts #css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Thebiggestgordon]

I feel like “border: 1px solid red;” is the universal sign of “where the heck is this element” lol.

[PeppertopComics]

For the outline method it sometimes helps to also add a *:nth-child(2n) selector using a different outline colour. The result is that the outlines alternate between the two colours as you descend down the tree. This can makes it easier to distinguish between different elements, and makes sibling vs parent-child relationships clearer.

[philwatts]

I've used the outline method quite a lot but the background concept is super nice!

[aimsworth]

"Today I Learnt!" moment exactly!

[codewithpatrick]

I thought he was going to say use the Inspect tool lol. It’s pretty useful when you can delete sections until you find the culprit.

[blacksmokegearjammer]

There is a chrome extension called Pesticide that I like to use that kinda helps sometimes. It will put an outline around every element on your page. Sometimes gives you a bit of a clue as to what is going on. This transparent background idea sounds even better though.

[souravdutt]

Hovering with mouse when inspect tab select element option is turned on help me found overflowing elements easily.

[jesuscmd]

Awesome!!! 15 year working with CSS and this is amazing

[MikeHerzog_de]

I usually have a `.debug-css *: { outline hotpink solid 1px; }` for _selective_ debugging.
I will definitely add the transparent background to that. Thank you, Kevin, again, for making CSS a little less frustrating ;-)

[davitti]

Your tips are always timely. Have been haunting ghost for the past hour.

[MD-ntnv]

I absolutely love this! I have typically in the past always used:

border: 1px solid red;

Which of course helps you see the boundaries of everything but unfortunately effects the size of the elements. “Outline” is a great way to get the same effect without effecting the flow of the elements. Perfect!

[SPPR]

thanks for the outline trick
I found a 2px mistake in my site, that I didn't found for months

[JamesPero]

In addition to these I've also used "box-shadow: 0 0 1px red;"

[eric-seastrand]

Background opacity debugging is a big brain play.
Thank you for this!

[zachjensz]

I knew what this would be as soon as I read the title hahahahaha

[simpleedge]

Woah. Mind is blown right now. I LOVE the mostly transparent background solution!

[andrewpratt]

I really enjoy the shorts content you've been putting out. Now I can still learn when I'm trying to distract myself from leaning. 😂

[uscjake]

Kevin... you're the real MVP dude. Internet fist bump.

[joshseipel]

I always use "border: 1px dotted red", but like the background idea as well!

[KrishnaM]

I had tried the outline method, but background color with opacity seems really neat ! Thank you for this trick !!