웹 페이지에서 사용중인 CSS 스타일을 확인하는 방법이 있습니까?

121

웹 페이지에서 현재 사용중인 CSS 스타일을 알고 싶습니다.

css

— 도움
소스

2

CSS 검사기가있는 브라우저를 사용하십시오. Safari 및 Chrome (일명 Webkit)은 개발자 도구의 일부로이를 제공합니다. Firefox에서는 Firebug 플러그인이 제공합니다. Internet Explorer에는 내가 아는 것과 비슷한 것이 없습니다. 인스펙터를 통해 요소를 선택하고 마우스 오른쪽 버튼을 클릭 한 다음 "요소 검사"를 선택할 수 있습니다. 그러면 선택한 요소에 적용되는 선택기와 개별 규칙이 표시됩니다.

— Lee이 (

@Lee ie8 개발자 도구 모음은 CSS 선택기의 방화범과 동일한 방식으로 작동하며 오른쪽에 적용된 스타일을 선택하고 볼 수 있습니다.

— kobe

의 중복 가능성 특정 페이지에 사용되는 경우에만 CSS를 추출

— cweiske

58

Firebug 용 CSS Usage 추가 기능을 설치하고 해당 페이지에서 실행하십시오. 해당 페이지에서 사용중인 스타일과 사용하지 않는 스타일을 알려줍니다.

— 고베
소스

@Harry, 일단이 플러그인을 설치하면 방화범의 일부로 탭에있을 것입니다. 여기서 net과 all //// 다른 것이 필요하면 알려주세요

— kobe

33

Chrome에 이와 같은 것이 있습니까?

— Pedro Luz

3

이것은 더 이상 작동하지 않는 것으로 보이며 안타깝게도 더 이상 지원되지 않습니다.

— nostromo

1

Firebug는 더 이상 유지되지 않습니다. 이 부가 기능은 Firefox 내장 DevTools에서 작동하지 않는다고 생각합니다.

— Andrew

검사하는 동안 크롬에서 감사 옵션을 사용할 수 있습니다. 이는 특정 페이지에서 사용되지 않는 CSS 만 표시합니다.

— Sarath Hari

81

Google 크롬에는 사용되지 않는 CSS를 확인하는 두 가지 방법이 있습니다. .

1. 감사 탭 : > 페이지에서 오른쪽 클릭 + 요소 검사 "감사"탭을 찾은 다음 감사를 실행하여 "웹 페이지 성능"이 선택되었는지 확인합니다.

사용되지 않은 모든 CSS 태그를 나열합니다 . 아래 이미지를 참조하십시오.

업데이트 : --------------또는-------------

2. 커버리지 탭 : > 페이지에서 오른쪽 클릭 + 요소 검사, 맨 오른쪽에있는 세 개의 점 (이미지에서 원)을 찾아 콘솔 드로어를 열고 (또는 Esc 키를 누른 다음) 마지막으로 드로어의 왼쪽에있는 세 개의 점 (원으로 표시된 커버리지 도구를 엽니 다.

Chrome은 사용되지 않는 CSS 및 JS를 확인하는 도구를 시작했습니다.- Chrome 59 업데이트 기록을 시작하고 중지 할 수 있습니다 (이미지의 빨간색 사각형). 페이지에서 사용자 경험을 더 잘 파악할 수 있습니다.

파일에서 사용되거나 사용되지 않은 모든 CSS / JS를 표시합니다. 아래 이미지를 참조하십시오.

— Cordell
소스

3

어떤 것들이 사용되는지 확인하면 좋을 것입니다 .... 그러나 이것은 훌륭합니다, 감사합니다.

— Serj 세이건

내가 말할 수있는 한, 무엇이 사용되는지 알고 싶다면 Chrome 용 플러그인을 설치하는 것이 가장 좋습니다.-죄송합니다

— Cordell

새로운 크롬 59 업데이트는 당신이 볼 수있는 사용 / 사용하지 않는 CSS와 JS

— 코델

이를 위해 Chrome은 어떤 라이브러리를 사용하나요?

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n 여기서 n은 웹 사이트의 각 페이지입니다 . 도구 /이 답변을 "쓸모없는"것으로 분류하는 것은 누구에게도 도움이되지 않습니다.

— Shai Cohen

40

완전성을 위해 그리고 코멘트에서 요청 되었기 때문에- 동일한 목적을 위해 Chrome에 CSS 감사 도구도 있습니다 . 여기에 몇 가지 세부 정보가 있습니다.

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

— 얀 페 졸드
소스

3

이 답변이 참조하는 "CSS 감사 도구"가 Chrome 개발자 도구 의 감사 탭 과 동일한 지 잘 모르겠지만 사용되지 않는 CSS 규칙 (예 : "Some.css : 42 % 현재 페이지에서 사용되지 않습니다. ").

— Kenny Evitt 2014 년

11

UnCSS를 살펴 보십시오 . 사용 된 CSS의 CSS 파일을 만드는 데 도움이됩니다.

— 로버트 브리 시타
소스

1

그것은 훌륭한 프로그램입니다. 감사! 롭

— r0berts

1

일회성 좋은 웹 도구. 타이

— billynoah

1

이 aweso입니다 - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- 신경 끄시 고 .......

— 브라이언 파월

@ brian-powell 예, 템플릿 출력이 먼저 생성되어야합니다. UnCSS는 무엇이 필요한지 어떻게 알 수 있습니까?

— Robert Brisita

8

내가 사용하고 CSS 발굴 . 크롬 용으로 만들어졌지만 훌륭한 도구라고 생각합니다!

— cs.matyi
소스

방금 시도했습니다. cssdig.com으로 전화를 걸어 모든 작업을 수행하므로 로컬에서 호스팅되는 항목을 보거나 분석 할 수 없습니다.

— Brilliand

0

이 도구는 간단한 js 스크립트입니다 https://github.com/shashwatsahai/CSSExtractor/ 이 도구는 활성 스타일에 대한 모든 소스를 나열하는 특정 페이지에서 CSS를 가져오고 소스를 다음과 같이 JSON에 저장하는 데 도움이됩니다. 가치로 키와 규칙. href 링크에서 모든 CSS를로드하고 여기에서 적용된 모든 스타일을 알려줍니다. 모든 CSS를 .css 파일에 저장하도록 코드를 수정할 수 있습니다. 따라서 모든 CSS를 결합합니다.

— 샤 쉬왓 사 하이
소스

0

타사 도구 및 앱없이 커버리지 탭에서 크롬 개발 도구를 사용하여 사용하지 않는 CSS 및 자바 스크립트를 찾을 수 있습니다. Google 개발자의 아래 게시물을 읽으십시오. 크롬 커버리지 탭

— 마흐디 사파리
소스