Kiểm tra phần tử CSS trên mọi trang web với CSSPeeper cho Chrome

Bảng điều khiển Chrome DevTools thông thường mạnh mẽ. Nó cho phép bất cứ ai vào bất kỳ trang nào để nghiên cứu bố cục của trang web, CSS, và thậm chí tiêu đề HTTP nếu cần.

Bạn có thể làm rất nhiều với DevTools CSS inspector. Nhưng nó không có bảng điều khiển GUI rõ ràng và đó là một điều mà mọi developer sẽ thích.

Hãy thử CSSPeeper, một Chrome extension bổ sung điều khiển GUI này vào trình duyệt của bạn. Nó cho phép bạn nghiên cứu thuộc tính CSS của bất kỳ phần tử nào trên bất kỳ trang nào, mặc dù nó chỉ được tạo cho Chrome ngay bây giờ. Sau khi cài đặt bạn chỉ cần truy cập trang web và nhấp vào nút chính của tiện ích mở rộng trong thanh tiện ích của Chrome. Một cửa sổ inspector mới xuất hiện trên đầu trang với các chi tiết về mỗi yếu tố chính.

Khi bạn duyệt qua trang web, bạn có thể nhấp vào bất kỳ phần tử nào bạn thấy bằng phác thảo rải rác. Điều này có thể bao gồm các nút, các phần của trang, tiêu đề, mục điều hướng, bạn đặt tên nó. Từ đó bạn sẽ nhận được một inspector toàn bộ với các chi tiết về kiểu chữ, lựa chọn màu sắc và kiểu phông chữ. Đó là một cách tuyệt vời để kéo các kiểu trực tiếp từ trang web mà không tự đào sâu vào mã CSS.

CSSPeeper thậm chí còn cho phép bạn lựa chọn các màu liên quan với bộ chọn màu và máy tạo màu. Bạn có thể xuất các hình ảnh từ các trang, xây dựng các sơ đồ màu của riêng mình, và áp dụng chúng vào các mô hình của riêng bạn với Photoshop hoặc Sketch. CSSPeeper phù hợp hơn với các designer thay vì developer vì nó là một plugin rất thân thiện với designer kéo CSS thô và biến đổi đoạn mã thành các khối dữ liệu dễ đọc.

Nhưng plugin này cũng có thể giúp ích cho các developer rất nhiều! Nó thực sự là một công cụ kiểm tra trang web mạnh mẽ cho tất cả các loại CSS.

Hãy xem trang chủ của CSSPeeper để tìm hiểu thêm về những gì nó có thể làm. Trang chính cũng bao gồm liên kết đến cửa hàng Chrome để bạn có thể cài đặt tiện ích mở rộng miễn phí và đưa nó ra thử nghiệm.