Key Features

• CSS debugging made easy — Instantly highlight element outlines to understand your layout structure
• Toggle with ease — Use keyboard shortcuts (Ctrl+Shift+P on Windows, Cmd+Shift+P on Mac) or the context menu to enable and disable Pesticide
• Interactive instructions — A banner provides tips for efficient usage, including how to toggle modes
• Customizable — Control what debug information is shown from the options page
• Visual DOM inspection — Understand how your HTML and CSS work together by seeing element boundaries
• Real-time toggle — Inject or remove Pesticide styling instantly without reloading the page

How to Use

1. Install Pesticide for Chrome from the Chrome Web Store.
2. Navigate to any webpage you want to debug.
3. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to toggle Pesticide on. Every HTML element on the page will be outlined with a colored border.
4. Use the outlines to identify overlapping elements, unexpected margins, padding issues, or misaligned layouts.
5. Press the shortcut again to turn Pesticide off.
6. Right-click the page and select the Pesticide option from the context menu for an alternative way to toggle.
7. Access the options page to customize which information is displayed.

Who Is It For?

Pesticide is an essential tool for frontend developers, web designers, and anyone learning CSS. It helps you quickly spot layout problems by visualizing element boundaries — no more guessing how elements are stacked or why a layout breaks. Whether you are debugging a complex grid, inspecting box model spacing, or teaching yourself how CSS layouts work, Pesticide makes the invisible structure of a webpage visible.