CSS Peek: Element Inspector

Instantly inspect elements and explore CSS properties, XPath, and more. Easily export assets, color palettes, and typography.

CSS Peek: Element Inspector helps you instantly inspect any element on a webpage, explore its CSS box model, styles, colors, and typography, and export assets, color palettes, and typography styles in just a few clicks. ✨ Features: - Click any element to view its full CSS styles. - Visual box model diagram with color-coded layers and pixel values inside each layer. - Inspect and copy the color palette of the page. - Inspect and copy typography and fonts used on the page. - View and download assets from the webpage. - Manipulate the selected element’s styles in the Manipulate tab, with the ability to persist CSS changes across multiple websites. Each website has its own dedicated storage for saved styles. - A live color picker that allows selecting a color from anywhere on the page and updating the UI preview in real-time. - When an image element is selected, you can drag & drop a new image directly onto it. - The extension allows adjusting CSS of the selected element using keyboard shortcuts. This helps test spacing, sizing, colors, etc., without touching the code. - XPath Locator that finds both absolute and relative XPath selectors for an element, suggests improvements for more stable locators, and generates ready-to-use Playwright and Cypress code snippets. - Smart Mode Inspector enables fast element inspection while hovering, with an integrated accessibility checker. - Ability to toggle the main hover inspector on and off, allowing you to interact with the page (click buttons, navigate, etc.) and then re-enable it to continue inspecting elements. - Accessibility tab where you can find a complete report of the accessibility status of the current page with suggestions how to fix the issues where needed. - Light/Dark mode switcher. Lightweight and user friendly.