CSSPeeper for Chrome을 사용하여 모든 사이트의 상세한 CSS 검사기

일반 Chrome DevTools 패널은 매우 효과적입니다. 필요한 경우 사이트의 레이아웃, CSS 및 HTTP 헤더까지도 연구 할 수 있도록 모든 페이지에 대해 자세히 알아볼 수 있습니다..

DevTools CSS 검사기로 많은 것을 할 수 있습니다. 하지만 명확한 GUI 패널이 없으며 모든 개발자가 좋아할만한 장점이 있습니다..

브라우저에이 GUI 검사기를 추가하는 무료 Chrome 확장 프로그램 인 CSSPeeper를 확인하십시오. 지금은 Chrome 용으로 만 제작되었지만 모든 페이지의 모든 요소의 CSS 속성을 연구 할 수 있습니다..

일단 설치하면 웹 페이지를 방문하여 확장 프로그램의 기본 버튼을 클릭하십시오. Chrome 부가 기능 표시 줄에 있습니다. 새로운 검사기 창이 웹 페이지 상단에 각 주요 요소에 대한 세부 정보와 함께 나타납니다..

사이트를 탐색 할 때 점선으로 표시된 모든 요소를 ​​클릭 할 수 있습니다. 여기에는 버튼, 페이지 섹션, 헤더, 탐색 항목 등이 포함될 수 있습니다..

여기에서 타이포그래피, 색상 선택 및 글꼴 스타일에 대한 세부 사항을 포함한 전체 속성 검사기를 얻을 수 있습니다. 이 방법은 웹 페이지에서 직접 스타일 가져 오기 CSS 코드를 직접 파고 들지 않고.

CSSPeeper는 심지어 당신에게 내장 된 색상 선택 도구로 관련 색상을 선택하십시오. 및 색 구성표 생성기. 페이지에서 이미지를 내보내고 자신 만의 색 구성표를 만들거나 이것을 당신의 모형에 적용해라. Photoshop 또는 Sketch 사용.

나는 주로 디자이너에게이 확장 프로그램을 권장합니다. 개발자가 아닌, CSS를 사용하지 않고 코드를 읽기 쉬운 덩어리로 변환하는 디자이너 친화적 인 플러그인입니다..

그러나이 플러그인은 개발자들에게도 도움이 될 수 있습니다! 그것은 정말로 모든 유형의 CSS에 대한 강력한 사이트 검사 도구.

CSSPeeper 홈페이지에서 할 수있는 일에 대해 자세히 알아보십시오. 기본 페이지에는 Chrome 스토어 링크가 포함되어 있으므로 확장 프로그램을 무료로 설치하고 테스트 실행을 위해 가져갈 수 있습니다..