CSS Peek: Element Inspector

About

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.