CSS Peek: Element Inspector
CSS Peek: Element Inspector lets you quickly inspect any element on a webpage and instantly visualize its CSS box model, styles, colors, typography and more.
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 clicked element styles within the Manipulate tab.
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.
Dark mode
Lightweight and user friendly.