CodingBunny CSS Inspector adds a DevTools-style panel to the frontend of your site. Hover any element to see its CSS, click to lock it and copy exactly what you need, without opening the browser developer tools.
It is ideal for customizing a theme, overriding a page builder style or understanding where a rule comes from.
What you can inspect
- The CSS of any element, cleaned of default values and ready to paste
- Hover, focus, focus-visible, focus-within and active states, read from your real stylesheets
- The ::before and ::after pseudo-elements
- The CSS variables used by the element and their current values
- The stylesheets that style the element: theme, plugin, WordPress core, generated files and inline styles, with the selectors that match
- A clickable breadcrumb of parent elements, with a short or full selector path
Made for daily use
- Open it from the admin bar or with Alt+Shift+C
- Copy selectors and CSS blocks in one click
- Dock the panel on the left or on the right and resize it
- Colors shown in HEX with a preview swatch
- The panel is isolated from your theme, so its styles never break the inspector and vice versa
- Visible only to administrators and never loaded for visitors or in the dashboard