← Quay lại tính năng
Free

Trình kiểm tra CSS

Trình kiểm tra CSS là công cụ miễn phí mạnh mẽ cho phép bạn di chuột qua bất kỳ phần tử nào trên trang web để xem ngay các thuộc tính CSS đã tính toán.

Cho dù bạn đang khắc phục sự cố bố cục hay nghiên cứu một trang web bạn yêu thích, CSS Inspector cung cấp mọi thứ bạn cần trong một bảng điều khiển nổi sạch sẽ. Kiểm tra dễ dàng mà không cần mở DevTools của trình duyệt.

Xem trước trực tiếp
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
Các tính năng chính

Hiển thị thuộc tính thời gian thực

Xem ngay phông chữ, kích thước, màu sắc, khoảng cách và nhiều nội dung khác khi di chuột qua bất kỳ phần tử nào.

Nhấp để khóa

Nhấp vào phần tử để khóa bảng điều khiển không bị biến mất, cho phép kiểm tra chi tiết.

Chỉnh sửa kiểu trực tiếp

Nhấp đúp vào các giá trị để thay đổi chúng trực tiếp. Các chỉnh sửa của bạn sẽ phản ánh ngay lập tức trên trang.

Sao chép bằng một cú nhấp chuột

Sao chép các thuộc tính riêng lẻ hoặc toàn bộ khối kiểu thiết kế vào khay nhớ tạm của bạn bằng một cú nhấp chuột.

Hình ảnh hóa mô hình hộp (Box Model)

Xem các giá trị lề (margin), viền (border) và đệm (padding) một cách trực quan.

Kích thước và Vị trí phần tử

Hiển thị chiều rộng, chiều cao và vị trí của phần tử trên trang.

Bạn có thể kiểm tra những gì

CSS Inspector hiển thị hơn 40 thuộc tính:

In ấn (Typography)

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Mô hình hộp (Box Model)

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

Bố cục (Layout)

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

Nền (Background)

  • background-color
  • background-image
  • background-size
  • background-position

Hiệu ứng (Effects)

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Các trường hợp sử dụng phổ biến

Khắc phục sự cố bố cục

Kiểm tra các phần tử bị lệch hàng với độ chính xác cao.

Học hỏi từ các thiết kế hiện có

Nghiên cứu các kiểu dáng của trang web yêu thích của bạn.

Thử nghiệm thiết kế nhanh

Kiểm tra các thay đổi trước khi viết mã.

Đánh giá của khách hàng

Hiển thị các thay đổi trực tiếp trong các cuộc họp.

Trích xuất kiểu dáng

Dễ dàng lấy mã CSS cho các phần tử mới.

Cách sử dụng
1

Kích hoạt CSS Inspector

Nhấp vào biểu tượng CSS Inspector trong thanh công cụ DevSuite Pro.

2

Di chuột để kiểm tra

Di chuyển con trỏ của bạn qua bất kỳ phần tử nào để xem các thuộc tính của nó.

3

Nhấp để khóa

Nhấp vào phần tử để ghim bảng thông tin.

4

Chỉnh sửa kiểu

Nhấp đúp vào các giá trị để điều chỉnh chúng.

5

Sao chép và sử dụng

Sao chép mã đã cập nhật và sử dụng nó trong dự án của bạn.

Sẵn sàng thử chưa? Trình kiểm tra CSS?

Cài đặt DevSuite Pro miễn phí và mở khóa hơn 39 công cụ dành cho nhà phát triển cho trình duyệt của bạn.

Thêm vào Chrome Thêm vào Edge Thêm vào FireFox