ibaidbcedfbojihflojeekadmebnlbpb
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.
JSON Viewer Pro
A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options. Itβ¦ A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options. It has lot of unique features which makes it a must have JSON formatter for beginner to advance users. β Completely Free and no advertisements. β Beautify JSON response from API β Visual representation of JSON with Chart β Depth traversing of JSON property using breadcrumbs β Access or Traverse via JSON Path navigation Prompt β Write custom JSON in Input area β Configurable Content-Type and JSON Content Detection β Ignore particular websites or URLs from rendering β Import local JSON, YAML and XML files supported β Download JSON file using Context Menu β Dark and Light theme supported β Custom CSS supported β Intuitive User Interface β Copy path of any property and value easily β Access JSON in your console using only json keyword
Debug CSS
When enabled adds outline to all elements on the page, Hold Ctrl and hover to get more detail In the latest version we have addressed the issue where the extension stopped working after mandatory `manifest_version upgrage` from Google. also, we have addressed the issue in which user were unable to see the styling for the bottom most element of the page. we have added tooltip feature which gives a basic styles in tooltip itself. A lightweight extension for Google chrome to show outline of all the element exist on page. while working on web page development the one of the difficult part is to position the element as required and check which element affecting the other one. This chrome extension allows user to see outline on every element of the page. Hold the keyboard Ctrl button and hover element it will show the element details along with the value. Post installation simply click on the extension icon to turn it On or Off. If you are a keyboard shortcut lover like me simply hit `Alt+Shift+C ` key to toggle the extension. This extension works on CSS outline attribute: add the below code snippet in any CSS of a web page The extension does the same the only thing is; it gives different color to different element(s) while the code snippet adds red outline to every element. # Other work and repository [A lightweight customizable plugin for jQuery to show horizontal length in form of vertical progress bar.](https://github.com/pranayjoshicse/VerLim.js) [listed on jqueryscript.net](https://www.jqueryscript.net/other/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js.html) [Demo](https://www.jqueryscript.net/demo/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js/)
CSS Viewer for Google Chromeβ’
FREE! Quick and simple CSS property viewer. Want to view the CSS for a button/certain HTML element on the web page? You can do so quickly today once you install this extension. This CSS Viewer allows you to click on any button/image/text etc on a web page and you can instantly see the CSS code which was used. Its a quick and easy way to sort out the CSS code for a specific element on a website. Try using this CSS Viewer today to check out the CSS code being implemented on a website today. Disclaimer: Please note this extension is NOT made by Google and is made by an independent development team. All copyrights belong to their respective owners. Google doesnβt endorse or sponsor this extension. CSS Viewer for Google Chromeβ’ is not owned by, is not licensed by and is not a subsidiary of Google Inc.
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.