Stop wasting time! Kill CSS bug with Pesticide | Chrome Extension

You might be wondering, what I mean by Pesticide for CSS. Correct! Don’t be amazed when I tell this is actually a CSS which helps in killing the bug in your layout.

I have been using it for a while and notice there are very few who are aware of this amazing and wonderful work done by Adam Morse.

I searched extensively on the web, hoping people might have written a good article about it but I couldn’t find one. I mostly found only a line or two or a paragraph about it, which I think is not a justice for this really awesome tool.

So let’s begin….

It’s pretty simple to configure. Just install it on chrome using the chrome web store.

To use it on your page, you just need to click on the Pesticide button which just appears in the top right corner of the bar.

On clicking, every element will be outlined by a different colour which will be very helpful in distinguishing the boundary and overlay of each element. Same is happening in the banner of this story.

So let’s see an example. Here is a card, which has three buttons on it. They are looking good, but still, there is something missing. They look so cluttered.

So let’s figure out, how we can fix this.

Option 1: Open the chrome dev tool, navigate to the element and figure out the issue.

Option 2: Just click on the Pesticide shortcut button and everything will be done for you. You need not travel the whole tree to figure out the issue.

As you can see, how easy it is to use. We can just provide margin to fix the issue. They look much better after the margin.

Go ahead and give it a try. I hope you like it, then please share it with the like-minded. If you want to read more on this, then you can visit here.