웹 페이지에서 현재 사용중인 CSS 스타일을 알고 싶습니다.
답변
Firebug 용 CSS Usage 추가 기능을 설치하고 해당 페이지에서 실행하십시오. 해당 페이지에서 사용중인 스타일과 사용하지 않는 스타일을 알려줍니다.
답변
Google 크롬에는 사용되지 않는 CSS를 확인하는 두 가지 방법이 있습니다. .
1. 감사 탭 : > 페이지에서 오른쪽 클릭 + 요소 검사 “감사”탭을 찾은 다음 감사를 실행하여 “웹 페이지 성능”이 선택되었는지 확인합니다.
사용되지 않은 모든 CSS 태그를 나열합니다 . 아래 이미지를 참조하십시오.
업데이트 :
————–또는————-
2. 커버리지 탭 : > 페이지에서 오른쪽 클릭 + 요소 검사, 맨 오른쪽에있는 세 개의 점 (이미지에서 원)을 찾아 콘솔 드로어를 열고 (또는 Esc 키를 누른 다음) 마지막으로 드로어의 왼쪽에있는 세 개의 점 (원으로 표시된 커버리지 도구를 엽니 다.
Chrome은 사용되지 않는 CSS 및 JS를 확인하는 도구를 시작했습니다.-
Chrome 59 업데이트
기록을 시작하고 중지 할 수 있습니다 (이미지의 빨간색 사각형). 페이지에서 사용자 경험을 더 잘 파악할 수 있습니다.
파일에서 사용되거나 사용되지 않은 모든 CSS / JS를
표시합니다. 아래 이미지를 참조하십시오.
답변
완전성을 위해 그리고 코멘트에서 요청 되었기 때문에- 동일한 목적을 위해 Chrome에 CSS 감사 도구도 있습니다 . 여기에 몇 가지 세부 정보가 있습니다.
http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google
답변
답변
내가 사용하고 CSS 발굴 . 크롬 용으로 만들어졌지만 훌륭한 도구라고 생각합니다!
답변
이 도구는 간단한 js 스크립트입니다 https://github.com/shashwatsahai/CSSExtractor/ 이 도구는 활성 스타일에 대한 모든 소스를 나열하는 특정 페이지에서 CSS를 가져오고 소스를 다음과 같이 JSON에 저장하는 데 도움이됩니다. 가치로 키와 규칙. href 링크에서 모든 CSS를로드하고 여기에서 적용된 모든 스타일을 알려줍니다. 모든 CSS를 .css 파일에 저장하도록 코드를 수정할 수 있습니다. 따라서 모든 CSS를 결합합니다.
답변
타사 도구 및 앱없이 커버리지 탭에서 크롬 개발 도구를 사용하여 사용하지 않는 CSS 및 자바 스크립트를 찾을 수 있습니다. Google 개발자의 아래 게시물을 읽으십시오.
크롬 커버리지 탭
