Làm cách nào để tìm các hình ảnh và kiểu CSS không sử dụng trong một trang web? [đóng cửa]

Có phương pháp nào (ngoài phương pháp thử và sai) tôi có thể sử dụng để tìm các tệp hình ảnh không sử dụng không? Làm thế nào về các khai báo CSS cho ID và Lớp thậm chí không tồn tại trong trang web?

Có vẻ như có thể có một cách để viết một tập lệnh quét trang web, lập hồ sơ và xem những hình ảnh và kiểu nào không bao giờ được tải.

CóCó một tiện ích mở rộng của Firefox tìm thấytìm thấy các bộ chọn CSS không sử dụng trên một trang. Nócócó một tùy chọn để thu hút toàn bộ trang web. Phiên bản 3.01Nên có thể hoạt động với các phiên bản Firefox mới hơn.

http://www.brothercake.com/dustmeselectors/

Và đây là một tùy chọn khác:

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Bạn không phải trả bất kỳ dịch vụ web nào hoặc tìm kiếm tiện ích bổ sung, bạn đã có tiện ích này trong Google Chrome dưới F12 (Inspector)->Audits->Remove unused CSS rules

Ảnh chụp màn hình:

Cập nhật: 30/06/2017

Giờ đây, Chrome 59 cung cấp phạm vi bao phủ mã CSS và JS . Xem https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Ở cấp độ tệp:

sử dụng wget để thu gọn trang web một cách mạnh mẽ và sau đó xử lý nhật ký máy chủ http để có được danh sách các tệp được truy cập, khác biệt điều này với các tệp trong trang web

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

CSS Redundancy Checker là một công cụ bạn chạy cục bộ, bạn chuyển biểu định kiểu và danh sách URL hoặc thư mục tệp HTML. Đây là mô tả được đưa ra trên trang web của công cụ:

Một tập lệnh đơn giản, được cung cấp biểu định kiểu CSS và tệp .txt liệt kê URL của tệp HTML hoặc thư mục tệp HTML, sẽ lặp lại tất cả và liệt kê các câu lệnh CSS trong biểu định kiểu mà không bao giờ được gọi trong HTML.

Về cơ bản, nó giúp bạn giữ cho các tệp CSS của mình phù hợp và nhỏ gọn. Và nó chính xác một cách hợp lý.

Theo ghi nhận của Tim Murtaugh trên bài đăng blog A List Apart, " Hai công cụ để giữ cho CSS của bạn sạch sẽ ":

csscss

csscss sẽ phân tích cú pháp bất kỳ tệp CSS nào mà bạn cung cấp và cho bạn biết bộ quy tắc nào có khai báo trùng lặp.

Và có liên quan nhất đến câu hỏi:
helium-css

Helium là một công cụ để khám phá CSS không sử dụng trên nhiều trang trên một trang web.

Công cụ này dựa trên javascript và chạy từ trình duyệt.

Helium chấp nhận một danh sách các URL cho các phần khác nhau của trang web, sau đó tải và phân tích cú pháp từng trang để tạo danh sách tất cả các bảng định kiểu. Sau đó, nó truy cập từng trang trong danh sách URL và kiểm tra xem các bộ chọn được tìm thấy trong bảng định kiểu có được sử dụng trên các trang hay không. Cuối cùng, nó tạo ra một báo cáo nêu chi tiết từng biểu định kiểu và các bộ chọn không được tìm thấy để sử dụng trên bất kỳ trang nào trong số các trang nhất định.

Dường như tôi nhớ lại Adobe Dreamweaver hoặc Adobe Golive có tính năng tìm cả kiểu và hình ảnh mồ côi; không thể nhớ cái nào bây giờ. Có thể là cả hai, nhưng các tính năng đã được giấu kỹ.

TopStyle có một bộ công cụ để định vị và xử lý các lớp mồ côi. Nó cũng sẽ cung cấp cho bạn báo cáo về nơi ID và lớp được sử dụng trong HTML, cho phép bạn nhanh chóng mở và chuyển đến phần đánh dấu có liên quan. Đây là lời giới thiệu từ trang web về tính năng này:

Báo cáo Trang web: Xem nhanh các kiểu được sử dụng trong trang web của bạn. Tìm hiểu nơi bạn đã áp dụng các lớp kiểu chưa được xác định trong bất kỳ biểu định kiểu nào hoặc xem những lớp kiểu nào bạn đã xác định không được sử dụng.

Rất hữu ích để mổ xẻ các trang web không quen thuộc.

Tuy nhiên, nó không tìm thấy hình ảnh không sử dụng.

Chrome canary build có một tùy chọn trong thanh công cụ dành cho nhà phát triển cho " CSS Coverage" là một trong những tính năng dành cho nhà phát triển thử nghiệm. Tùy chọn này xuất hiện trong tab dòng thời gian và có thể được sử dụng để lấy danh sách CSS không sử dụng.

Xin lưu ý rằng bạn cũng cần phải bật tính năng này trong cài đặt trên thanh công cụ dành cho nhà phát triển. Tính năng này có lẽ sẽ được phát hành chính thức trên chrome.

Tôi thấy công cụ này hoạt động với tất cả các phiên bản của Firefox! Phải mất một chút thời gian để tìm hiểu cách hoạt động của nó, nhưng khi nó bắt đầu thì nó có vẻ khá ổn. Nó sẽ lưu một phiên bản CSS mới với các bộ chọn CSS được chú ý để bạn có thể nhanh chóng hoàn nguyên nếu cần.

Sử dụng CSS - Tiện ích Firefox

Công cụ nhỏ này cung cấp cho bạn danh sách các quy tắc css được một số html sử dụng.

Đây là trên Code Pen

Nhấp vào Run code snippet, sau đó nhấp vào Full pageđể truy cập vào nó. Sau đó làm theo hướng dẫn trong đoạn mã. Bạn có thể chạy nó toàn trang để xem nó hoạt động với html / css của bạn.

Nhưng việc đánh dấu bút viết mã của tôi như một công cụ sẽ dễ dàng hơn.

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("</code>");

Tất cả các công cụ được liệt kê ở đây đều rất tốt cho CSS. Tôi không biết về Dreamweaver & Co., nhưng tôi đã thực hiện một chương trình nhỏ trước đó để giúp tôi dọn dẹp các dự án trang web của mình

Tìm-Tệp không sử dụng

Nó không giúp ích gì với CSS & nội dung, mà thay vào đó là hình ảnh mồ côi và các loại tệp khác.

Hy vọng nó giúp!

Helium CSS là một công cụ tuyệt vời cho việc này. Tuy nhiên, cần lưu ý rằng bạn nên chạy công cụ này trên phiên bản phát triển hoặc phiên bản cục bộ của trang web của bạn. Nếu bạn chạy điều này trên phiên bản sản xuất, khách truy cập của bạn sẽ có thể thấy môi trường thử nghiệm Helium.

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

Để trả lời câu hỏi của bạn về công cụ tìm các tệp hình ảnh không sử dụng, bạn có thể sử dụng Xenu Link Sleuth để thu gọn trang web của bạn để tìm tất cả các hình ảnh mà trang web của bạn sử dụng. Sau đó, Xenu nhắc bạn truy cập ftp để nó có thể thu thập dữ liệu thư mục của bạn để tìm các tệp mồ côi. Tôi vẫn chưa sử dụng nó trên máy chủ sản xuất nhưng nó có vẻ đáng để xem xét.

CHỈNH SỬA: Bạn chỉ cần cẩn thận không xóa hình ảnh được sử dụng bởi javascript.