CSS 추출 크롬 확장을 사용하여 모든 웹 사이트의 코드 분석

당신이 할 수있는 일이 많이 있습니다. Chrome DevTools 라이브 웹 사이트 편집에서 자세한 HTTP 요청 연구에 이르기까지 하지만 CSS 패턴을 분석하는 기능 콘솔에 구워지지 않는다..

와 CSS 추출, 너는 모두를 분석 할 수있다. CSS 선택자, 특성, 과 독특한 속성 Chrome에서 바로 웹 페이지를 볼 수 있습니다. 이 확장은 완전히 무료이며 프론트 엔드 개발자에게 많은 권한을 제공합니다..

스타일 시트를 검사 할 때 CSS Dig 패널에서 많은 데이터를 얻을 수 있습니다. 너에게 보여줄 수있어. 개별 셀렉터, 포함 중복 과 불필요한 특이도.

시작하려면 간단히 플러그인을 설치하십시오. 콘솔 창을 엽니 다. 너는 찾을거야. 두 개의 탭 CSS Dig 창 : 등록 정보 과 셀렉터.

결과를 탐색 할 수 있습니다. 재산별로 조직 (색상, 테두리, 패딩) 또는 선택자에 의해 (클래스, ID). 내가 사용하는 글꼴과 색상을 연구 할 수 있도록 속성 창을 가장 가치있게 찾았습니다..

이 도구는 모든 웹 사이트에서 전반적으로 작동하므로 편리합니다. 리버스 엔지니어링 누구의 디자인. 이 창에서 직접 CSS를 복사 / 붙여넣고 자신의 프로젝트에 다시 사용할 수 있습니다..

CSS Dig의 가장 일반적인 사용 사례는 중복 된 색상을 지우십시오. 색상 표에서. 얼마나 많은 녹색 음영이 정말로 필요합니까? 또는 한 페이지에 몇 개의 산 세리프 글꼴이 필요한지?

CSS Dig는 믿을 수 없을 정도로 간단하므로 DevTools와 같은 수십 가지 기능을 기대하지 마십시오. 대신,이 플러그인은 오히려 프론트 엔드 개발자를 대상으로 함 반복 선택자 또는 중복 속성에 대한 사이트 감사.

그만큼 소스 코드 플러그인의 GitHub에서 무료로 사용할 수 있습니다. 최신 업데이트.