Phân tích bất kỳ mã nào của trang web với CSS Dig Chrome Extension

Có rất nhiều thứ bạn có thể làm với Chrome DevTools từ chỉnh sửa các trang web trực tiếp đến nghiên cứu các yêu cầu HTTP chi tiết. Nhưng khả năng phân tích các mẫu CSS không được nướng vào bàn điều khiển.

Với Đào CSS, bạn có thể phân tích tất cả Bộ chọn CSS, tính đặc hiệu, và Tính chất độc đáo của bất kỳ trang web nào ngay từ Chrome. Tiện ích mở rộng này hoàn toàn miễn phí và cung cấp nhiều sức mạnh cho các nhà phát triển frontend.

Khi bạn kiểm tra biểu định kiểu, bạn sẽ nhận được nhiều dữ liệu từ bảng CSS Dig. Nó có thể cho bạn thấy bộ chọn cá nhân, kể cả trùng lặp và mức độ đặc hiệu không cần thiết.

Để bắt đầu, chỉ cần cài đặt plugin và mở cửa sổ giao diện điều khiển. Bạn sẽ tìm thấy hai tab trong cửa sổ CSS Dig: Tính chất và Bộ chọn.

Bạn có thể duyệt kết quả tổ chức bởi tài sản (màu, đường viền, phần đệm), hoặc bởi các bộ chọn (các lớp, ID). Tôi thấy cửa sổ Thuộc tính là có giá trị nhất, vì nó cho phép bạn nghiên cứu phông chữ và màu sắc nào bạn đang sử dụng.

Công cụ này hoạt động trên bảng cho bất kỳ trang web nào, vì vậy nó cũng tiện dụng cho kỹ thuật đảo ngược thiết kế của bất cứ ai. Bạn có thể sao chép / dán CSS trực tiếp từ cửa sổ này và sử dụng lại nó trong các dự án của riêng bạn.

Có lẽ trường hợp sử dụng phổ biến nhất cho CSS Dig là xóa màu trùng lặp từ bảng màu của bạn. Bạn thực sự cần bao nhiêu sắc thái của màu xanh lá cây? Hoặc, có bao nhiêu phông chữ sans-serif khác nhau là cần thiết cho một trang?

CSS Dig cực kỳ đơn giản, vì vậy đừng mong đợi hàng tá tính năng như với DevTools. Thay vào đó, plugin này là khá hướng tới các nhà phát triển frontend trang web kiểm toán cho bộ chọn lặp lại hoặc thuộc tính trùng lặp.

Các mã nguồn của plugin có sẵn miễn phí trên GitHub, nơi bạn cũng sẽ tìm thấy tất cả cập nhật mới nhất.