Dezalicious icon

Dezalicious

Extension Actions

How to install Open in Chrome Web Store
CRX ID
eafbmjhabkallaiggahffbkhklbhpoae
Status
  • Live on Store
Description from extension meta

A powerful CSS inspector and element analyzer for web development

Image from store
Dezalicious
Description from store

🌟 Detailed Description

Dezalicious is a powerful, lightweight toolkit designed to bring Figma-style inspection and analysis features directly to your browser for fast, precise web development and design QA.
Key Features:

* Pixel-Perfect Spacing Measurement: Instantly view the margin, padding, and gap between elements. Hold Alt and click an element to lock it, then hover over any other element to measure the precise distance between them (Figma-style distance mode).

* Live Element Analysis: Hover over any element to see its box model dimensions (width × height) and its calculated Z-index.
* Viewport and Layout Tools: Quickly visualize the current viewport size and media query breakpoints.

* Advanced Screenshot Tool:
* Capture specific regions, the visible area, or the full page.
* Annotate screenshots with arrows, text, and highlights for clear communication with your team.
* Instantly copy the annotated image to your clipboard.
* Non-Intrusive & Fast: Designed to be injected and removed instantly, minimizing interference with your web development flow.
Dezalicious helps you ensure your HTML and CSS implementation perfectly matches your design specifications, making front-end debugging and QA faster than ever.