웹 사이트에서 사용하지 않는 이미지와 CSS 스타일을 어떻게 찾을 수 있습니까? [닫은]

사용하지 않는 이미지 파일을 찾는 데 사용할 수있는 방법 (시행 착오 제외)이 있습니까? 사이트에 존재하지 않는 ID와 클래스에 대한 CSS 선언은 어떻습니까?

사이트를 스캔하고 프로필을 작성하고로드되지 않은 이미지와 스타일을 확인하는 스크립트를 작성하는 방법이있는 것 같습니다.

거기Firefox 확장이있었습니다. 발견페이지에서 사용하지 않는 CSS 선택기를 찾았습니다. 그것있다전체 사이트를 스파이더 링 할 수있는 옵션이 있습니다. 버전 3.01할까요 최신 버전의 Firefox에서 작동 할 수 있습니다.

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

또 다른 옵션이 있습니다.

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

웹 서비스를 지불하거나 애드온을 검색 할 필요가 없습니다. 이미 F12로 Google 크롬에 있습니다. (Inspector)->Audits->Remove unused CSS rules

스크린 샷 :

업데이트 : 2017 년 6 월 30 일

이제 Chrome 59는 CSS 및 JS 코드 범위를 제공합니다 . https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage를 참조 하세요.

파일 수준에서 :

wget을 사용하여 사이트를 공격적으로 스파이더 링 한 다음 http 서버 로그를 처리하여 액세스 된 파일 목록을 가져옵니다.이를 사이트의 파일과 비교합니다.

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

CSS 중복 검사기 는 로컬에서 실행하는 도구로, 스타일 시트와 URL 목록 또는 HTML 파일 디렉토리를 전달합니다. 다음은 도구 사이트에 제공된 설명입니다.

CSS 스타일 시트와 HTML 파일의 URL을 나열하는 .txt 파일 또는 HTML 파일의 디렉토리가 주어지면 모든 파일을 반복하고 HTML에서 호출되지 않는 CSS 문을 스타일 시트에 나열하는 간단한 스크립트입니다.

기본적으로 CSS 파일을 적절하고 간결하게 유지하는 데 도움이됩니다. 그리고 합리적으로 정확합니다.

A List Apart 블로그 게시물 " CSS를 깔끔하게 유지하는 두 가지 도구 "에서 Tim Murtaugh가 언급 한대로 :

csscss

csscss는 사용자가 제공 한 CSS 파일을 구문 분석하고 어떤 규칙 세트에 중복 된 선언이 있는지 알려줍니다.

그리고 가장 관련성이 높은 질문 :
헬륨 -css

Helium은 웹 사이트의 여러 페이지에서 사용되지 않는 CSS를 발견하는 도구입니다.

이 도구는 자바 스크립트 기반이며 브라우저에서 실행됩니다.

Helium은 사이트의 다른 섹션에 대한 URL 목록을 수락 한 다음 각 페이지를로드하고 구문 분석하여 모든 스타일 시트 목록을 작성합니다. 그런 다음 URL 목록의 각 페이지를 방문하여 스타일 시트에서 찾은 선택기가 페이지에서 사용되는지 확인합니다. 마지막으로, 주어진 페이지에서 사용되지 않은 각 스타일 시트와 선택기를 자세히 설명하는 보고서를 생성합니다.

고아 스타일과 이미지를 모두 찾는 기능이있는 Adobe Dreamweaver 또는 Adobe Golive를 기억하는 것 같습니다. 지금은 기억할 수 없습니다. 둘 다 가능하지만 기능은 잘 숨겨져있었습니다.

TopStyle 에는 고아 클래스를 찾고 처리하기위한 도구 모음이 있습니다. 또한 HTML에서 ID 및 클래스가 사용되는 위치에 대한 보고서를 제공하므로 관련 마크 업을 빠르게 열고 건너 뛸 수 있습니다. 이 기능에 대한 웹 사이트의 설명은 다음과 같습니다.

사이트 보고서 : 사이트에서 스타일이 사용되는 위치를 한 눈에 볼 수 있습니다. 스타일 시트에 정의되지 않은 스타일 클래스를 적용한 위치를 확인하거나 정의한 스타일 클래스 중 사용되지 않는 클래스를 확인합니다.

익숙하지 않은 웹 사이트를 분석하는 데 매우 유용합니다.

하지만 사용하지 않은 이미지는 찾지 못합니다.

Chrome 카나리아 빌드에는 개발자 툴바에 실험적인 개발자 기능 중 하나로 ' CSS 적용 범위' 옵션이 있습니다. 이 옵션은 타임 라인 탭에 표시되며 사용하지 않는 CSS 목록을 가져 오는 데 사용할 수 있습니다.

개발자 도구 모음의 설정에서도이 기능을 활성화해야합니다. 이 기능은 아마도 공식적인 크롬 릴리스로 만들 것입니다.

모든 버전의 Firefox에서 작동하는이 도구를 찾았습니다! 작동 방식을 배우는 데 약간의 시간이 걸리지 만 일단 시작되면 꽤 괜찮아 보입니다. 필요한 경우 신속하게 되돌릴 수 있도록 주석 처리 된 CSS 선택기와 함께 새 버전의 CSS를 저장합니다.

CSS 사용-Firefox 애드온

이 작은 도구는 일부 html에서 사용중인 CSS 규칙 목록을 제공합니다.

여기 코드 펜에 있습니다.

를 클릭 Run code snippet한 다음를 클릭 Full page하여 들어가십시오. 그런 다음 스 니펫의 지침을 따릅니다. 전체 페이지를 실행하여 html / css에서 작동하는지 확인할 수 있습니다.

그러나 내 코드 펜을 도구로 북마크하는 것이 더 쉽습니다.

/* 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>");

여기에 나열된 모든 도구는 CSS에 유용합니다. Dreamweaver & Co에 대해 잘 모릅니다.하지만 웹 사이트 프로젝트를 정리하는 데 도움이되는 작은 프로그램을 한동안 만들었습니다.

사용하지 않는 파일 찾기

CSS 및 물건에는 도움이되지 않지만 고아 이미지 및 기타 유형의 파일에는 도움이되지 않습니다.

도움이 되었기를 바랍니다.

헬륨 CSS는이를위한 훌륭한 도구입니다. 이 도구는 웹 사이트의 개발 또는 로컬 버전에서 실행해야합니다. 프로덕션 버전에서 실행하면 방문자가 헬륨 테스트 환경을 볼 수 있습니다.

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

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

사용하지 않는 이미지 파일을 찾는 도구에 대한 질문에 답하려면 Xenu Link Sleuth 를 사용 하여 사이트를 스파이더 링하여 사이트에서 사용하는 모든 이미지를 찾을 수 있습니다. 그런 다음 Xenu는 고아 파일을 찾기 위해 디렉터리를 크롤링 할 수 있도록 ftp 액세스를 요청합니다. 아직 프로덕션 서버에서 사용하지 않았지만 살펴볼 가치가있는 것 같습니다.

편집 : 자바 스크립트에서 사용하는 이미지를 삭제하지 않도록주의해야합니다.