CodingBunny CSS Inspector
| 开发者 | codingbunny |
|---|---|
| 更新时间 | 2026年10月2日 23:47 |
| 捐献地址: | 去捐款 |
| PHP版本: | 8.0 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
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
- 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
安装:
- 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.
常见问题:
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_capability filter.
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.
更新日志:
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.
- Improvement: Added the ability to resize the width of the sidebar.
- Fix: Correct color preview in pseudo-classes.
- Improvement: Improved sidebar structure.
- Improvement: Improved CSS coding.
- New: Initial release.