Title: CodingBunny CSS Inspector
Author: CodingBunny
Published: <strong>25 Tháng 11, 2025</strong>
Last modified: 20 Tháng 5, 2026

---

Tìm kiếm plugin

![](https://ps.w.org/coding-bunny-css-inspector/assets/banner-772x250.png?rev=3402647)

![](https://ps.w.org/coding-bunny-css-inspector/assets/icon-256x256.png?rev=3403578)

# CodingBunny CSS Inspector

 Bởi [CodingBunny](https://profiles.wordpress.org/codingbunny/)

[Tải về](https://downloads.wordpress.org/plugin/coding-bunny-css-inspector.1.0.2.zip)

 * [Chi tiết](https://vi.wordpress.org/plugins/coding-bunny-css-inspector/#description)
 * [Đánh giá](https://vi.wordpress.org/plugins/coding-bunny-css-inspector/#reviews)
 * [Nhà phát triển](https://vi.wordpress.org/plugins/coding-bunny-css-inspector/#developers)

 [Hỗ trợ](https://wordpress.org/support/plugin/coding-bunny-css-inspector/)

## Mô tả

CodingBunny CSS Inspector adds a clean, DevTools-style sidebar to your WordPress
frontend, letting administrators visually inspect any element and copy its CSS with
a single click.
 Perfect for theme customization, debugging, and quick styling adjustments—
without ever opening the browser DevTools.

The inspector displays full CSS blocks, selector paths, HEX color values, used CSS
variables, and ready-to-copy pseudo-state styles like :hover, :focus, and :active.

Designed for power and simplicity, and visible only to logged-in administrators.

#### Features

DevTools-like inspection sidebar, launched from the admin bar

Full CSS block viewer for any element (full or simplified selector paths)

Ready-to-copy pseudo-state blocks: :hover, :focus, :active

Automatic extraction of all CSS variables used by the selected element

Copy-to-clipboard buttons with instant visual feedback

Lightweight and unobtrusive—runs only for authenticated admins

Never loads for visitors or on the WordPress dashboard

#### Installation

Download codingbunny-css-inspector.zip

Unzip the file

Upload the codingbunny-css-inspector folder to /wp-content/plugins/

Activate CodingBunny CSS Inspector from the Plugins screen

### Usage

Click “CSS Inspector” in the WordPress admin bar (frontend only)

Hover any element to preview its CSS in the sidebar

Click to lock the selection; press ESC to unlock or click ✕ to close

Toggle between full or compact selector paths

Use the copy buttons to instantly copy selectors and CSS blocks (with green confirmation)

## Ảnh màn hình

 * [[

## Hỏi đáp

### Who can access the inspector?

Only logged-in administrators can use the inspector.

### Does it load in the WordPress admin dashboard?

No, it works exclusively on frontend pages.

### Will visitors ever see it?

Never. The inspector and its scripts load only for authenticated administrators.

## Đánh giá

Không có đánh giá nào cho plugin này.

## Người đóng góp & Lập trình viên

“CodingBunny CSS Inspector” là mã nguồn mở. Những người sau đã đóng góp vào plugin
này.

Những người đóng góp

 *   [ CodingBunny ](https://profiles.wordpress.org/codingbunny/)

[Dịch “CodingBunny CSS Inspector” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/coding-bunny-css-inspector)

### Muốn tham gia phát triển?

[Duyệt code](https://plugins.trac.wordpress.org/browser/coding-bunny-css-inspector/),
check out [SVN repository](https://plugins.svn.wordpress.org/coding-bunny-css-inspector/),
hoặc theo dõi [nhật ký phát triển](https://plugins.trac.wordpress.org/log/coding-bunny-css-inspector/)
qua [RSS](https://plugins.trac.wordpress.org/log/coding-bunny-css-inspector/?limit=100&mode=stop_on_copy&format=rss).

## Nhật ký thay đổi

#### 1.0.2 – 11/28/2025

Improvement: Added the ability to resize the width of the sidebar.
 FIX: Correct
color preview in pseudo-classes.

#### 1.0.1 – 11/26/2025

Improvement: Improved sidebar structure
 Improvement: Improved CSS coding

#### 1.0.0 – 11/21/2025

 * New: Initial Release

## Meta

 *  Phiên bản **1.0.2**
 *  Cập nhật lần cuối **2 tuần trước**
 *  Số lượt cài đặt **Ít hơn 10**
 *  Phiên bản WordPress ** 6.0 hoặc cao hơn **
 *  Đã kiểm tra lên đến **7.0**
 *  Phiên bản PHP ** 8.0 hoặc cao hơn **
 *  Ngôn ngữ
 * [English (US)](https://wordpress.org/plugins/coding-bunny-css-inspector/)
 * Thẻ
 * [css](https://vi.wordpress.org/plugins/tags/css/)[devtools](https://vi.wordpress.org/plugins/tags/devtools/)
   [Frontend](https://vi.wordpress.org/plugins/tags/frontend/)[inspector](https://vi.wordpress.org/plugins/tags/inspector/)
   [tools](https://vi.wordpress.org/plugins/tags/tools/)
 *  [Nâng cao](https://vi.wordpress.org/plugins/coding-bunny-css-inspector/advanced/)

## Đánh giá

Chưa có đánh giá nào được gửi.

[Your review](https://wordpress.org/support/plugin/coding-bunny-css-inspector/reviews/#new-post)

[Xem tất cả đánh giá](https://wordpress.org/support/plugin/coding-bunny-css-inspector/reviews/)

## Những người đóng góp

 *   [ CodingBunny ](https://profiles.wordpress.org/codingbunny/)

## Hỗ trợ

Có điều gì muốn nói? cần giúp đỡ?

 [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/coding-bunny-css-inspector/)