This series is a project inspired by @dickiebush’s "Ship 30 for 30” Atomic Essays. Which, I commit to spend 30 minutes a day for 30 days straight to write a short essay about software development tools that I love. My goal is to build my daily writing habit and connect to more people. Check out #ship30for30 on Twitter.
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.
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!
Top comments (0)