Trình kiểm tra CSS

Cho dù bạn đang gỡ lỗi một vấn đề về bố cục, tìm hiểu ngược lại một thiết kế mà bạn yêu thích, hay chỉ đơn giản là muốn kiểm tra nhanh khoảng cách và giá trị typography, CSS Inspector cung cấp mọi thứ bạn cần trong một bảng điều khiển nổi gọn gàng. Khác với DevTools của trình duyệt, công cụ này không hề vướng víu — không có panel neo cố định, không thay đổi kích thước viewport. Chỉ cần di chuột, nhấp chuột và kiểm tra. Công cụ hiển thị các style đã tính toán (computed styles) — tức những gì trình duyệt thực sự render — chứ không chỉ là CSS bạn viết ra. Điều này có nghĩa là bạn thấy được giá trị thực sau khi kế thừa (inheritance), độ đặc hiệu (specificity) và cascading đã được xử lý xong — chính là những giá trị ảnh hưởng đến những gì người dùng nhìn thấy trên màn hình.

Việc kiểm tra một phần tử không bao giờ kích hoạt reflow hay repaint của trang, vì vậy bạn có thể thoải mái khám phá mà không lo làm xáo trộn vị trí cuộn, animation hay trạng thái JavaScript. Các pseudo-element như ::before và ::after cũng được hỗ trợ — di chuột vào phần tử cha và panel sẽ hiển thị style của nội dung được tạo ra (generated content) tách biệt với style của chính phần tử đó. Các custom property CSS (biến CSS) được phân giải về giá trị tính toán cuối cùng, nhưng panel cũng cho bạn biết tên biến đã tạo ra giá trị đó, nhờ vậy bạn có thể truy ngược một giá trị màu sắc hay khoảng cách về đúng design token gốc thay vì chỉ thấy một con số pixel thô.

Trong công việc hàng ngày, hầu hết lập trình viên sử dụng CSS Inspector hàng chục lần mỗi phiên làm việc — kiểm tra tại sao margin bị collapse, xác nhận mã hex trước khi copy vào stylesheet, hoặc kiểm tra xem một breakpoint media query có thực sự áp dụng đúng style hay không. Vì đây là một panel nổi thay vì một chế độ chiếm toàn bộ trình duyệt, bạn có thể để nó mở trong khi chuyển tab để xem code editor hoặc file thiết kế của mình, rồi quay lại ngay đúng phần tử đang được hover mà không mất dấu vị trí.