Trình kiểm tra CSS chi tiết trên mọi trang web với CSSPeeper cho Chrome
Bảng điều khiển Chrome DevTools thông thường rất mạnh mẽ. Nó cho phép bất cứ ai đi sâu vào bất kỳ trang nào để nghiên cứu bố cục, CSS và thậm chí các tiêu đề HTTP của trang web nếu cần.
Bạn có thể làm rất nhiều với trình kiểm tra CSS DevTools. Nhưng nó không có bảng điều khiển GUI rõ ràng và đó là điều mà mọi nhà phát triển đều yêu thích.
Hãy xem CSSPeeper, một tiện ích mở rộng Chrome miễn phí có thêm trình kiểm tra GUI này vào trình duyệt của bạn. Nó cho phép bạn nghiên cứu các thuộc tính CSS của bất kỳ thành phần nào trên bất kỳ trang nào, mặc dù hiện tại nó chỉ được xây dựng cho Chrome.
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 Chrome. Một cửa sổ thanh tra mới xuất hiện trên đầu trang web với các chi tiết về từng yếu tố chính.
Khi bạn duyệt qua trang web, bạn có thể nhấp vào bất kỳ yếu tố nào bạn thấy với một phác thảo chấm. Điều này có thể bao gồm các nút, phần trang, tiêu đề, mục điều hướng, bạn đặt tên cho nó.
Từ đó bạn sẽ có được toàn bộ thanh tra 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 kiểu trực tiếp từ một trang web không tự đào sâu vào mã CSS.
CSSPeeper thậm chí cho phép bạn chọn màu liên quan với bộ chọn màu tích hợp và bộ tạo màu. Bạn có thể xuất hình ảnh từ các trang, xây dựng bảng màu của riêng bạn và áp dụng những điều này vào mockup của riêng bạn với Photoshop hoặc Phác thảo.
Tôi chủ yếu đề nghị mở rộng này cho các nhà thiết kế thay vì các nhà phát triển vì đây là một plugin thân thiện với nhà thiết kế hơn, có thể kéo CSS thô và biến mã thành các khối dữ liệu dễ đọc.
Nhưng plugin này cũng có thể giúp các nhà phát triển quá! 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ủ CSSPeeper để tìm hiểu thêm về những gì nó có thể làm. Trang chính cũng bao gồm một 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à mang nó ra để chạy thử.
