As a web developer, I love using CSS to adjust a page layout, but get frustrated sometimes when some elements get wonky. It’s not always easy to identify which container those items located in.
When viewing an HTML page on a browser, there are no grid lines that guide your layout or explicitly show you which element appears in the place they aren’t supposed to. So, you often have to guess and test several times. This is where Pesticide comes in.
Pesticide is a browser extension. It’s a tool that helps us developers see things more thoroughly. Once we click the button, the border lines of each element and division are displayed. We will see it right away if that particular item is in the right place, has too large padding or needs more spacing or not.
Here is how a web page looks like after using Pesticide.
To add Pesticide on your Chrome, go to this link.
To read more about the tool in detail, Rafay Jamal’s article can take you further.
Any CSS debugging tools you like? Feel free to share!
This is day#2 post and a part of my commitment to spend 30 minutes a day for 30 days straight to write about software development tools that I love. My goal is to build my daily writing habit and connect to more people. This project is inspired by @dickiebush ’s “Ship 30 for 30” Atomic Essays.