Web Developer – 웹 프론트엔드 마크업 생산성을 껑충 뛰게 해주는 크롬/파이어폭스/오페라 익스텐션

이번에 새로운 프로젝트 개발을 하면서, 신박한 익스텐션을 발견했습니다.

바로 Web Developer인데요(이름이 참 정직^^;;)

이름에 걸맞게 웹개발자에게 유용한 플러그인들을 개발한(혹은 모아둔) 확장 프로그램입니다. 크롬/파이어폭스/오페라 모두 지원하네요.

2014년 5월 23일이 마지막 업데이트 날짜지만 여전히 쓰기 좋습니다.

원하는 페이지에서 익스텐션을 실행시켜 ‘Outline block level elements’를 누르면

이렇게 border: 1px solid red를 일일이 타이핑한것과 같은 화면을 보여줍니다.

혹은 ‘Display Id&Class Details’를 누르면 아이디/클래스 정보들이 옆에 뜨네요.

포토샵 Ruler처럼 가이드라인을 넣거나, 영역을 지정해서 크기, start position등을 알 수도 있습니다.(퐁이 기여엇!)

이외의 좋은 기능들은

• 자바스크립트 disable

• 세션 쿠키 지우기

• Check/Uncheck all checkboxes

• Display div orders

• CSS Validation

등등이 있습니다.

(로컬에서 돌리면 항상 되지만, 몇몇 안먹는 외부 사이트들도 있습니다.)

그럼 함께 더 행복하고 쾌적한 프론트엔드 개발을 해보아요!

(그리고 그 툴을 적용한 우리의 적나라한 CSS)