웹 사이트에서 사용하지 않는 이미지와 CSS 스타일을 어떻게 찾을 수 있습니까?[닫은]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
사용하지 않는 이미지 파일을 찾는 데 사용할 수있는 방법 (시행 착오 제외)이 있습니까?사이트에 존재하지 않는 ID와 클래스에 대한 CSS 선언은 어떻습니까?
사이트를 스캔하고 프로필을 작성하고로드되지 않은 이미지와 스타일을 확인하는 스크립트를 작성하는 방법이있는 것 같습니다.
해결책
페이지에서 사용하지 않는 CSS 선택기를 찾는 Firefox 확장 프로그램이 있습니다.전체 사이트를 스파이더 링하는 옵션이 있습니다.버전 3.01은 최신 버전의 Firefox에서 작동합니다.
https://addons.mozilla.org/en-US / firefox / addon / dust-me-selectors /
또 다른 옵션이 있습니다.
https://addons.mozilla.org/en-US/ firefox / addon / css-usage /
다른 팁
웹 서비스를 지불하거나 애드온을 검색 할 필요가 없습니다. 이미 Google 크롬에 F12 (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 서버 로그를 처리하여 액세스 된 파일 목록을 가져옵니다.이를 사이트의 파일과 비교합니다. 라코 디스
CSS 중복 검사기 는 로컬에서 실행하는 도구입니다.스타일 시트와 URL 목록 또는 HTML 파일 디렉토리를 전달합니다.다음은 도구 사이트에 제공된 설명입니다. <인용구>
CSS 스타일 시트와 .txt 파일이있는 간단한 스크립트 HTML 파일의 URL 또는 HTML 파일의 디렉토리를 나열하면 그들 모두 위에 스타일 시트에있는 CSS 문을 나열하십시오. HTML에서 호출되지 않았습니다.
기본적으로 CSS 파일을 적절하고 간결하게 유지하는 데 도움이됩니다.과 상당히 정확합니다.
A List Apart 블로그 게시물에서 Tim Murtaugh가 언급했듯이 " 2 CSS를 깔끔하게 유지하는 도구 ":
csscss <인용구>
csscss는 사용자가 제공 한 모든 CSS 파일을 파싱하여 규칙 세트에 중복 된 선언이 있습니다.
그리고 가장 관련성이 높은 질문 :
helium-css
<인용구>
Helium은 웹의 여러 페이지에서 사용되지 않는 CSS를 발견하는 도구입니다. 사이트.
이 도구는 자바 스크립트 기반이며 브라우저에서 실행됩니다.
Helium은 사이트의 다른 섹션에 대한 URL 목록을 허용합니다. 각 페이지를로드하고 구문 분석하여 모든 스타일 시트 목록을 작성합니다. 그것 그런 다음 URL 목록의 각 페이지를 방문하여 선택기가 스타일 시트에있는 것은 페이지에서 사용됩니다. 마지막으로 각 스타일 시트와 그렇지 않은 선택기를 자세히 설명하는 보고서 해당 페이지에서 사용 된 것으로 확인되었습니다.
고아 스타일과 이미지를 모두 찾는 기능이있는 Adobe Dreamweaver 또는 Adobe Golive를 기억하는 것 같습니다.지금 어느 것을 기억할 수 없습니다.둘 다 가능하지만 기능은 잘 숨겨져있었습니다.
TopStyle 에는 고아 클래스를 찾고 처리하기위한 도구 모음이 있습니다.또한 HTML에서 ID와 클래스가 사용되는 위치에 대한 보고서를 제공하므로 관련 마크 업을 빠르게 열고 건너 뛸 수 있습니다.이 기능에 대한 웹 사이트의 설명은 다음과 같습니다. <인용구>
사이트 보고서 : 어디에서 스타일이 사이트에서 사용됩니다.찾아 스타일 클래스를 적용한 곳 어떤 스타일로도 정의되지 않은 시트 또는 스타일 클래스 확인 사용하지 않는 것을 정의했습니다.
익숙하지 않은 웹 사이트를 분석하는 데 매우 유용합니다.
하지만 사용하지 않은 이미지는 찾지 못합니다.
Chrome 카나리아 빌드에는 실험적인 개발자 기능 중 하나로 ' CSS 적용 범위'에 대한 개발자 툴바의 옵션이 있습니다.이 옵션은 타임 라인 탭에 표시되며 사용하지 않는 CSS 목록을 가져 오는 데 사용할 수 있습니다.
개발자 툴바의 설정에서도이 기능을 활성화해야합니다.이 기능은 아마도 공식적인 크롬 릴리스로 만들 것입니다.
모든 버전의 Firefox에서 작동하는이 도구를 찾았습니다!작동 방식을 배우는 데 약간의 시간이 걸리지 만 일단 시작되면 꽤 괜찮아 보입니다.주석 처리 된 CSS 선택기로 새 버전의 CSS를 저장하므로 필요한 경우 빠르게 되돌릴 수 있습니다.
이 작은 도구는 일부 html에서 사용중인 CSS 규칙 목록을 제공합니다.
여기에 코드 펜 이 있습니다.
코드 스 니펫 실행 을 클릭 한 다음 전체 페이지 를 클릭하여 시작하십시오.그런 다음 스 니펫의 지침을 따릅니다.전체 페이지를 실행하여 html / css에서 작동하는지 확인할 수 있습니다.
하지만 내 코드 펜을 도구로 북마크하는 것이 더 쉽습니다.
여기에 나열된 모든 도구는 CSS에 유용합니다.Dreamweaver & Co에 대해 잘 모릅니다.하지만 웹 사이트 프로젝트를 정리하는 데 도움이되는 작은 프로그램을 한동안 만들었습니다.
CSS 및 기타 항목에는 도움이되지 않지만 고아 이미지 및 기타 유형의 파일에는 도움이되지 않습니다.
도움이 되길 바랍니다!
Helium CSS는이를위한 훌륭한 도구입니다.이 도구는 웹 사이트의 개발 또는 로컬 버전에서 실행해야합니다.프로덕션 버전에서 실행하면 방문자가 헬륨 테스트 환경을 볼 수 있습니다.
