jeebpgmphhagpecfiophljpkhncoajcg
Not only inserts outlines (without background color) on all elements, but also inspects size and layout. CSS is awesome! Pesticide 3.2 is an advanced CSS debugger for Chrome that helps you inspect layout, spacing, typography, and computed styles directly on the page. Turn it on and hover any element to open a floating inspector with the details you actually need: - Element tag, id, and classes - DOM path - Client / offset / scroll dimensions - Full box model: margin, border, padding, radius, and content size - Font inspection - Computed CSS properties - Copy CSS output in Tailwind, inline, or block format - Outline-based debugging without shifting layout - Click to pin the current element while comparing spacing and styles - Resizable, draggable inspector overlay - Per-site saved panel position and size - Options page to show or hide inspector sections - Quick keyboard control with Ctrl + Shift + P Pesticide is built for front-end developers, designers, and anyone debugging tricky CSS. It gives you a fast visual way to understand how a page is built without opening heavyweight tools for every small layout check. - Better floating inspector workflow - Copy CSS panel with Tailwind, inline, and block output - Font and computed-style inspection - Configurable inspector sections from the options page If you want a lightweight Chrome extension for faster CSS debugging, Pesticide is built for that job.
Pesticide Layout Inspector
Pesticide Layout Inspector enhances web development by outlining page elements Pesticide Page Structure Highlighter 🕵️♂️ is a must-have tool for web developers and designers! 🎨 ✨ What It Does: It outlines every element on a webpage, allowing you to clearly see the structure and understand how different elements are arranged. This makes it easy to analyze and debug your web layouts. 🔍 Why You Need It: 🧩 Debug CSS Issues: Quickly spot layout problems and fix them with ease. 📐 Understand Page Structures: Perfect for learning how webpages are built or for refining your design. ⚡ Improve Workflow Efficiency: Save time by visualizing element boundaries directly in the browser. 💡 Install Pesticide today to streamline your web development process and gain deeper insights into page structures!
Pesticide (without hover bar)
A CSS debugging tool that outlines all page elements to help identify and fix layout issues. Pesticide is a Chrome extension designed to help you visualize the layout and structure of any webpage by outlining every HTML element. It’s a powerful tool for debugging CSS and understanding how elements are nested on the page. When activated, Pesticide injects custom CSS into the current tab, applying colored outlines to all elements based on their type. This makes it easy to identify spacing, nesting, and potential layout issues at a glance. ✅ One-click toggle to enable or disable visual outlines without needing page reload 🎨 Faithfully reflects the original website's CSS — no hover effects, no color changes, no shadows 🌍 Works on any website 🔐 Built using Manifest V3 for enhanced security and performance 🚫 No interference with site functionality or user interactions 1. Install the extension from the Chrome Web Store or load it unpacked 2. Click the Pesticide icon in your toolbar to toggle element outlines 3. Click again to turn them off Pesticide (without hover bar) is free software licensed under the GNU Affero General Public License v3.0.
Outline HTML Elements
Outline HTML elements with a colorful border without affecting the layout to inspect website structure. Outline HTML elements without affecting the layout to inspect the structure of websites and debug CSS. Features: 📐 Press and hold the key-bind to show the outline of HTML elements. ⚙️ Customizable key-bind in the extensions menu. 🎨 Choose outline colors for each HTML element individually. 🔄 No layout changes to the website. 👍 Lightweight and does not affect the performance of the browser. 📖 The extension is open-source and free to use. 🚫 The extension does not track any user data. 📺 The extension is free of ads. This extension is free and open source: https://github.com/maxontech/outline-html-elements This extension is developed and maintained by Max: https://www.maxrohowsky.com/
Pesticide for Chrome - Simple
Pesticide for Chrome - Simple is a minimal Chrome extension for frontend developers. With one click, it outlines every element on the page, helping you see how elements are structured, spaced, and nested. This tool is designed to make layout debugging faster and easier by showing the visual boundaries of all elements, just like browser devtools, but more direct and distraction-free. Whether you're inspecting box models, fixing margins and paddings, or simply understanding page structure, this extension saves time during development.
