크롬 추천 부가기능(확장 프로그램) - 개발자도구 #1

작년 이 맘때 쯔음에 크롬의 모든 애플리케이션을 살펴본 적이 있었습니다. 지금은 너무 많은 애플리케이션이 추가되어 살펴볼 엄두가 안나지만 유용하게 쓰고 있는 도구들을 소개하고자 합니다.

아래에 소개된 애플리케이션들은 Chorme 웹 스토어에 접속하여 애플리케이션 이름으로 검색하거나 바로가기를 이용하면 됩니다.

개발자 도구

개발자 도구들에는 각종 프로그래밍 언어를 다룰때 유용한 도구들이 많다. 여러 작업 환경에서 테스트 시간을 줄여주는데 큰 몫을 하곤 한다.

WEB DEVELOPER - chrispederick.com

다양한 도구들을 포함하고 있는 애플리케이션으로 크롬과 파폭에서 유명한 도구이며 크로스 플랫폼을 지원한다.

바로가기

각종 요소들을 비활성화 시키거나 Javascript, CSS, img등을 비활성화시켜 여러 환경을 위한 테스트를 진행할 수 있다. 또한 화면상의 픽셀을 잴수 있는 Ruler 도구, 유효성 검사도구, 각종 플랫폼에 맞는 해상도를 설정하여 변경할수 있는 Resize 도구등이 포함되어 있다.

PERPECT PIXEL - WellDoneCode

웹 페이지의 레이아웃을 설정할때 유용한 도구로 임의의 위치에 각종 이미지들을 위치시킬수 있어 전체적인 테마를 가늠할 수 있다.

바로가기

CSSViewer - M.ed

간단하게 CSS 속성을 볼 수 있는 도구로 요소검사를 통해 일일이 속성을 찾아 들어가지 않아도 되어 빠르게 필요한 부분만 살펴볼때 이용한다.

바로가기

ColorZilla - colorzilla.com

color picker의 일종으로 웹페이지에서 원하는 색을 추출할때 사용하며 팔레트와 CSS 그라이디언트를 내장하고 있다.

바로가기

N-WAX - mctenshi

N-WAX는 네이버에서 제공하는 툴로 접근성 문제를 진단하고 수정하는데 도움을 주는 도구이며, 대체 텍스트, W3C 유효성 검사, 표, 단축키, 페이지 언어, 키보드 포커스등을 검사한다.

바로가기

CSS-Shack - css-shack.herokuapp.com

레이어 제작 도구로 CSS3 의 각종 요소들의 그라데이션, 버튼, 그림자효과를 쉽게 만들수 있도록 도와준다.

바로가기

Gradient Creatoer - MUDCUBE

CSS3 그라디언트 제작 도구

바로가기

Get CSS Code - www.touchapp.co.uk

CSS3 제작을 도와 주는 도구로 각종 효과 (회전,기울임,쉐도우)를 손쉽게 사용할 수 있다.

바로가기