Tiện ích mở rộng CSS Chrome

Một vài tháng trước, chúng tôi đã xem xét trình duyệt Firefox mới được thiết kế cho các nhà phát triển. Kể từ đó, hầu hết các nhà phát triển của chúng tôi đã sử dụng Google Chrome làm trình duyệt chính của họ. Làm việc với Chrome cung cấp quyền truy cập vào kho lưu trữ khổng lồ gồm các công cụ và tiện ích mở rộng của Chrome giúp các công việc hàng ngày của chúng ta trở nên nhẹ nhàng hơn. Với các công cụ dành cho nhà phát triển tích hợp sẵn, dường như không cần thêm công cụ nào nữa. Tuy nhiên, tôi muốn giới thiệu với bạn 16 tiện ích mở rộng Google Chrome tốt nhất dành cho nhà phát triển

16 Tiện ích mở rộng Google Chrome tốt nhất dành cho nhà phát triển

1. người dùng

Tiện ích mở rộng Usersnap của Chrome cho phép bạn chụp và chú thích bất kỳ trang web nào trực tiếp trong trình duyệt của mình. Thật dễ dàng để cung cấp phản hồi trực quan về nguyên mẫu hoặc báo cáo lỗi với tiện ích mở rộng này của Google

Nhận phản hồi chưa bao giờ dễ dàng hơn thế và chúng tôi hy vọng bạn nhận ra điều đó sau khi đọc bài viết này. Hãy cho chúng tôi biết suy nghĩ của bạn, phản hồi của bạn rất quan trọng

Và nếu bạn đã sẵn sàng dùng thử phần mềm phản hồi khách hàng, Usersnap cung cấp bản dùng thử miễn phí. Đăng ký ngay hôm nay hoặc đặt bản demo với các chuyên gia phản hồi của chúng tôi

Đây là tính năng xem trước trong Chrome 96. Nhóm của chúng tôi đang tích cực làm việc với tính năng này và chúng tôi đang tìm kiếm phản hồi của bạn để cải tiến thêm

Mở bảng Tổng quan về CSS

1. Mở bất kỳ trang web nào, chẳng hạn như trang này

2. Mở DevTools

3. Chọn Tùy chỉnh và kiểm soát DevTools > Công cụ khác > Tổng quan về CSS.

   Ngoài ra, hãy sử dụng Menu Lệnh để mở bảng Tổng quan về CSS

Chạy và chạy lại báo cáo Tổng quan về CSS

1. Nhấp vào nút Chụp tổng quan để tạo báo cáo Tổng quan CSS về trang của bạn

2. Để chạy lại Tổng quan về CSS, hãy nhấp vào biểu tượng Xóa tổng quan và lặp lại bước đầu tiên.

Hiểu báo cáo Tổng quan về CSS

Báo cáo gồm năm phần

1. Tóm tắt tổng quan. Bản tóm tắt cấp cao về CSS của trang của bạn.

2. Màu sắc. Tất cả các màu trên trang của bạn. Các màu được nhóm theo loại, chẳng hạn như màu nền, màu văn bản, v.v. Phần này cũng hiển thị cho bạn các văn bản có vấn đề về độ tương phản thấp

   Mỗi màu có thể nhấp được. Ví dụ: giả sử màu đường viền #DADCE0 không khớp với bảng màu của trang web của bạn. Để có danh sách các phần tử sử dụng màu này, hãy nhấp vào màu

   Để đánh dấu phần tử trên trang, hãy di chuột qua phần tử trong danh sách

   Để mở phần tử trong bảng Thành phần, nhấp vào phần tử trong danh sách

3. Thông tin phông chữ. Tất cả các phông chữ trên trang của bạn và các lần xuất hiện của chúng, được nhóm theo kích thước phông chữ, độ dày phông chữ và chiều cao dòng khác nhau. Tương tự như phần Màu sắc, để xem danh sách các thành phần bị ảnh hưởng, hãy nhấp vào số lần xuất hiện của chúng

4. khai báo không sử dụng. Tất cả các kiểu không có hiệu ứng, được nhóm theo lý do

   Ví dụ: hai khai báo trên không được sử dụng vì nội dung xác định chiều cao và chiều rộng của phần tử nội tuyến. Để xem các phần tử tương ứng, hãy nhấp vào các lần xuất hiện

5. Truy vấn phương tiện truyền thông. Tất cả các truy vấn phương tiện được xác định trên trang của bạn, được sắp xếp theo số lần xuất hiện theo thứ tự giảm dần. Để xem danh sách các yếu tố bị ảnh hưởng, hãy nhấp vào lần xuất hiện của chúng

   Phần mở rộng nào được sử dụng cho CSS?

   Trong css bên ngoài, chúng tôi sử dụng . Tiện ích mở rộng css . . phần mở rộng css được sử dụng để lưu tệp css.

   Làm cách nào để sử dụng tiện ích mở rộng trình xem CSS?

   Sử dụng CSS Viewer rất đơn giản, trước tiên bạn cần phải bắt đầu tiện ích bổ sung này bằng cách nhấp vào biểu tượng của nó rồi nhấp vào nút bắt đầu. Then simply hover over the image/text to see the CSS properties.

   Tại sao tệp CSS không hoạt động trong Chrome?

   Đảm bảo rằng các tệp CSS và HTM/HTML của bạn sử dụng cùng một mã hóa . Nếu các tệp HTM/HTML của bạn được mã hóa dưới dạng UNICODE, thì biểu định kiểu của bạn cũng phải như vậy. IE và Edge không kén chọn. biểu định kiểu được hiển thị bất kể mã hóa. Nhưng Chrome hoàn toàn không dung nạp các mã hóa chưa từng có.