Có cách nào để kiểm tra kiểu CSS nào đang được sử dụng hay không được sử dụng trên trang web không?

121

Muốn biết những kiểu CSS nào hiện đang được sử dụng trên một trang web.

css

— CỨU GIÚP
nguồn

2

Sử dụng trình duyệt có trình kiểm tra CSS. Safari và Chrome (hay còn gọi là Webkit) cung cấp điều này như một phần của các công cụ dành cho nhà phát triển. Trong Firefox, điều này được cung cấp bởi plugin Firebug. Internet Explorer không có gì tương tự mà tôi biết. Trình kiểm tra sẽ cho phép bạn chọn một phần tử, nhấp chuột phải và chọn "Kiểm tra phần tử" - sau đó nó sẽ hiển thị cho bạn những bộ chọn nào và các quy tắc riêng lẻ nào được áp dụng cho phần tử bạn đã chọn.

— Lee

Thanh công cụ dành cho nhà phát triển @Lee ie8 hoạt động giống như firebug trong bộ chọn css, bạn có thể chọn và xem các kiểu được áp dụng ở bên phải.

— kobe

có thể trùng lặp của Extracting chỉ css được sử dụng trong một trang cụ thể

— cweiske

58

Cài đặt tiện ích bổ sung CSS Usage cho Firebug và chạy nó trên trang đó. Nó sẽ cho bạn biết những kiểu nào đang được sử dụng và không được sử dụng bởi trang đó.

— kobe
nguồn

@Harry, sau khi bạn cài đặt plugin này, nó sẽ nằm trong tab như một phần của firebug nơi bạn có mạng và tất cả //// hãy cho tôi biết nếu bạn cần bất kỳ thứ gì khác

— kobe

33

Có điều gì tương tự với Chrome không?

— Pedro Luz

3

Điều này dường như không hoạt động nữa và rất tiếc là không còn được hỗ trợ.

— nostromo

1

Lưu ý rằng Firebug không còn được duy trì. Tôi nghĩ rằng tiện ích bổ sung này không hoạt động với DevTools tích hợp sẵn của Firefox.

— Andrew

Bạn có thể sử dụng tùy chọn kiểm tra trong chrome trong khi kiểm tra. Điều này chỉ hiển thị css không được sử dụng trên trang cụ thể đó.

— Sarath Hari

81

Google Chrome có hai cách để kiểm tra CSS không sử dụng .

1. Tab Kiểm tra: > Nhấp chuột phải + Kiểm tra phần tử trên trang, tìm tab "Kiểm tra" và chạy kiểm tra, đảm bảo "Hiệu suất trang web" được chọn.

Liệt kê tất cả các thẻ CSS không sử dụng - xem hình ảnh bên dưới.

Cập nhật: - - - - - - - - - - - - - - - HOẶC - - - - - - - - - - - - - -

2. Tab Coverage: > Nhấp chuột phải + Kiểm tra phần tử trên trang, tìm ba dấu chấm ở ngoài cùng bên phải (được khoanh tròn trong hình ảnh) và mở Ngăn điều khiển (hoặc nhấn Esc), cuối cùng nhấp vào ba dấu chấm bên trái trong ngăn (khoanh tròn trong hình ảnh) để mở công cụ Bảo hiểm.

Chrome đã ra mắt công cụ để xem CSS và JS không sử dụng - Bản cập nhật Chrome 59 Cho phép bạn bắt đầu và dừng ghi (hình vuông màu đỏ trong hình ảnh) để cho phép trải nghiệm người dùng trên trang được bao phủ tốt hơn.

Hiển thị tất cả CSS / JS đã sử dụng và chưa sử dụng trong các tệp - xem hình ảnh bên dưới.

— Cordell
nguồn

3

Sẽ thật tuyệt khi xem cái nào cũng được sử dụng .... nhưng điều này thật tuyệt, cảm ơn.

— Serj Sagan

Theo như tôi có thể nói, nếu bạn muốn biết những gì được sử dụng, tốt nhất bạn nên cài đặt một plugin cho Chrome - xin lỗi

— Cordell

Mới Chrome 59 bản cập nhật cho phép bạn xem các sử dụng / CSS không sử dụng và JS

— Cordell

Chrome sử dụng thư viện nào để thực hiện việc này?

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n trong đó n = mỗi trang trong một trang web . Việc phân loại công cụ / câu trả lời này là "vô dụng" không có lợi cho bất kỳ ai.

— Shai Cohen

40

Chỉ vì sự hoàn chỉnh và vì nó đã được yêu cầu trong các nhận xét - hiện cũng có công cụ kiểm tra CSS trong Chrome cho mục đích tương tự. Một số thông tin chi tiết tại đây:

http://meboards.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
nguồn

3

Tôi không chắc "công cụ kiểm tra CSS" mà câu trả lời này đang đề cập đến có giống với tab Kiểm tra trong Công cụ dành cho nhà phát triển Chrome hay không, nhưng điều đó sẽ cho bạn biết quy tắc CSS nào không được sử dụng (ví dụ: "Some.css: 42% không được sử dụng bởi trang hiện tại. ").

— Kenny Evitt,

11

Hãy xem UnCSS . Nó giúp tạo một tệp CSS của CSS đã sử dụng.

— Robert Brisita
nguồn

1

Đó là một chương trình tuyệt vời. Cảm ơn! Rob

— r0berts

1

Công cụ web tốt cho một lần. ty

— billynoah

1

Đây là aweso - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- nevermind .......

— Brian Powell

@ brian-powell yep, đầu ra mẫu sẽ phải được tạo trước. Làm cách nào khác để UnCSS biết những gì cần thiết?

— Robert Brisita

8

Tôi đang sử dụng CSS Dig . Nó được tạo ra cho chrome, nhưng tôi nghĩ nó là một công cụ tuyệt vời!

— cs.matyi
nguồn

Tôi vừa thử điều này - nó thực hiện mọi thứ bằng cách gọi trang chủ đến cssdig.com, vì vậy nó không thể xem hoặc phân tích bất kỳ thứ gì được lưu trữ cục bộ.

— Brilliand

0

Hãy thử sử dụng công cụ này, chỉ là một tập lệnh js đơn giản https://github.com/shashwatsahai/CSSExtractor/ Công cụ này giúp lấy CSS từ một trang cụ thể liệt kê tất cả các nguồn cho các kiểu đang hoạt động và lưu nó vào một JSON với nguồn là khóa và các quy tắc dưới dạng giá trị. Nó tải tất cả CSS từ các liên kết href và cho biết tất cả các kiểu được áp dụng từ chúng. Bạn có thể sửa đổi mã để lưu tất cả css vào tệp .css. Qua đó kết hợp tất cả css của bạn.

— Shashwat Sahai
nguồn

0

Không có bất kỳ công cụ của bên thứ ba và bất kỳ ứng dụng nào, bạn có thể tìm thấy CSS và javascript không sử dụng bằng cách sử dụng các công cụ chrome dev trong tab phạm vi. đọc bài viết dưới đây từ các nhà phát triển google. tab bảo hiểm chrome

— Mahdi Safari
nguồn