Description
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
Screenshots
Installation
- Install the plugin from Plugins > Add New, or upload the
coding-bunny-css-inspectorfolder to/wp-content/plugins/. - Activate the plugin.
- Open any page of your site while logged in as an administrator and click “CSS Inspector” in the admin bar.
FAQ
-
How do I use it?
-
Hover an element to preview its CSS and click it to lock the selection. Press Esc or click the page to unlock, press Esc again to close the inspector. Click a parent in the breadcrumb to inspect it.
-
Who can use the inspector?
-
Only users who can manage options, which by default means administrators. Developers can change this with the
codicsin_capabilityfilter. -
Will visitors ever see it?
-
No. The inspector and its files load only for logged-in users with permission.
-
Why are some states missing for an element?
-
States are read from the stylesheets of your site. Stylesheets loaded from another domain without CORS headers cannot be read by the browser, so their rules are not shown.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“CodingBunny CSS Inspector” is open source software. The following people have contributed to this plugin.
Contributors
Translate “CodingBunny CSS Inspector” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.0 – 2026-10-02
- New: Real hover, focus, focus-visible, focus-within and active states read from your stylesheets.
- New: ::before and ::after pseudo-elements.
- New: Sources now show the matching selectors and recognize WordPress core, generated files and named inline styles.
- New: Size label on the highlighted element.
- New: Dock the panel on the left or on the right.
- New: Alt+Shift+C keyboard shortcut.
- New: Copy selector button.
- Improvement: Redesigned panel in line with the other CodingBunny plugins.
- Improvement: The panel is isolated from the theme styles.
- Improvement: Copied CSS skips default values and keeps CSS variables.
- Improvement: Rules inside media queries and @supports are now detected.
- Improvement: Much faster hovering on pages with large stylesheets.
- Improvement: Interface is now translatable.
- Fix: The base CSS of a locked element included its hover styles.
- Fix: Breadcrumbs were empty while hovering.
- Fix: Semi-transparent colors lost their transparency when converted to HEX.
- Fix: Class names with special characters produced invalid selectors.
- Fix: The admin bar button could not close the inspector while inspecting.
- Fix: Content from the page could be interpreted as HTML in the panel.
- Fix: Super admins on multisite could not use the inspector.
1.0.2 – 2025-11-28
- Improvement: Added the ability to resize the width of the sidebar.
- Fix: Correct color preview in pseudo-classes.
1.0.1 – 2025-11-26
- Improvement: Improved sidebar structure.
- Improvement: Improved CSS coding.
1.0.0 – 2025-11-21
- New: Initial release.