GetEles.

The extension reads the title, description and main colors of whatever page you are on, and shows them in one panel. That covers the checks you would otherwise dig out of the page source or the network tab. It is free, so there is no reason to skip it on quick audits.

Select any element and GetEles reports its size, padding, border and margin. A separate measurement tool lets you move the mouse over the page to mark the distance between two elements, which is handy when you need a number rather than a guess. Element information is free, and the measurement tool needs only a small mouse movement.

The Pro plan adds a structure tree you can browse, so you can switch to any node on the page and see how it nests. The same tier includes a converter that scans a selected element's style and turns it into Tailwind CSS classes, which saves hand-writing utility classes when you move a layout into a Tailwind front end.

You can pull the page's performance figures, such as FCP and LCP, to see how fast content shows up. API logs record the calls the page makes, so you can follow what it sends and receives while you interact with it. Both sit in the Pro and Lite mode tiers rather than the free one.

You can take an element screenshot or a full page screenshot, and the Pro tier adds more advanced capture options. Note that pages heavy on dynamic content, such as social platforms, do not capture cleanly. The read-later feature saves a page so you can return to it later, and it ships with the Pro and Lite mode tiers.

GetEles supports keyboard shortcuts so you can open the panel and reach common actions without leaving the mouse. Lite mode offers a lighter, simpler layout that keeps the basics while adding a few small extras for people who want less on screen. Both make the tool quicker to use during a long debugging session.