크롬 DevTool 과 Macaw

얼마전에 소식을 듣기는 했지만, 개발자 버전에만 들어있는 줄 알았던 크롬 DevTool(개발자도구) 새 버전이 지금 사용하는 버전에서도 가능하네요.. ^^ (사용하는 버전: Version 30.0.1599.69 m )

Elements panel

제가 보통 작업하는 방법이 마크업과 대충의 스타일을 에디터로 하고
크롬에서 보면서 스타일을 고친 후, 수정된 스타일을 하드카피 (-_-) css 화일에 옮기곤 했는데,
이번 DevTool을 이용하면, 고치는 순간 자동으로 저장된다고 하네요.
게다가 모든 소스파일을 개발자도구 'Source' 탭에서 직접 수정이 가능하다고 하니,
로컬로 작업하는 경우는, 웬만하면 에디터는 안써도 될것 같은 기분이 듭니다. ^^;
ftp 연동은 좀 힘들더라도, 버저닝을 조금 지원하면 더할나위 없을것 같은데요.. ^^)

혹시 새 개발자도구를 사용하고 있는 분이 계시나요?
있으시면 리뷰좀.. ^^

* * *

Macaw의 광고문구 (tag line)은 'The Code-Savvy Web Design Tool' 이라네요.
CS InStyle 같은 위지윅 기반 웹디자인 툴이면서, 내부적으로 실제 코딩하는 것과 비슷하거나 더 나은 결과물을 만들어준다고 하네요.


예를 들어, 아래처럼 여러 버튼이 있다면 공통된 속성은 .button으로 뽑고 개별적인 것은 각각의 클래스로 뽑아주고요..
http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2013/08/Screen-Shot-2013-08-02-at-12.05.35-PM-520x395.png

제가 InStyle 같은 웹디자인/저작 툴을 사용해보지 않아서, 위와 같은 기능이 얼마나 새로운지는 잘 모르겠지만,
프로그램을 주로하는 저로써는 굉장히 유용한 툴인것 같아 보입니다.
그밖에 js 스크립 작성을 도와주는 기능과, 기본적으로 유동형 그리드 기반이고, 반응형 디자인과 템플리팅 도 가능하다고 하는데, 아직 나와있는 소개 동영상은 아래 두개이네요.

한가지 단점은 맥용이라는 점.. -_-
|

댓글 4개

크롬 새 개발자도구 그림을 본문에 넣었는데, webp 포멧이라서 나오질 않네요.
전체 (영문) 소개글은 http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ 를 보세요. ^^
^^ 좋은 툴이네요.
사이트 반응형으로 잘 만드셨네요....^-^
음..한번 사용해봐야겠네요.
댓글을 작성하시려면 로그인이 필요합니다. 로그인

자유게시판

+
제목 글쓴이 날짜 조회
12년 전 조회 1,111
12년 전 조회 1,309
12년 전 조회 1,121
12년 전 조회 1,064
12년 전 조회 1,204
12년 전 조회 1,413
12년 전 조회 1,066
12년 전 조회 1,076
12년 전 조회 1,126
12년 전 조회 1,136
12년 전 조회 2,187
12년 전 조회 1,417
12년 전 조회 1,121
12년 전 조회 1,110
12년 전 조회 2,075
12년 전 조회 5,328
12년 전 조회 2,001
12년 전 조회 1,222
12년 전 조회 2,715
12년 전 조회 1,171
12년 전 조회 1,104
12년 전 조회 1,158
12년 전 조회 1,104
12년 전 조회 1,130
12년 전 조회 1,033
12년 전 조회 1,251
12년 전 조회 1,652
12년 전 조회 1,180
12년 전 조회 1,089
12년 전 조회 1,076
🐛 버그신고