구글 크롬은 일단 빠른 속도로 소문이 나서 적지 않은 분들이 주력 브라우저로 사용하고 있습니다. (물론 우리나라처럼 변태스러운 웹환경에서는 100% 전환은 불가하지만요.. )
이번 포스팅에서는 얼마전 스킨을 수정할때랑 Exif플러그인 제어용 스크립트를 작성하면서 직접 격어본 내용을 바탕으로 크롬에서 제공하는 디버깅기능을 소개할까 합니다.
웹페이지 개발을 해본 분이라면 개체들간의 레이아웃을 맞추기위해, 불필요한 border넣어가면서 크기나 스타일을 가늠해 본 경험이 한두번쯤은 있을겁니다. 뭐, 사실 이건 우리가 프로그램 코딩할때 printf 잔뜩 넣어서 확인하는 것과 유사한 최 하위레벨 디버깅이라 할 수 있습니다.
크롬에서는 보다 편리한 개발환경을 위해 다양한 디버깅도구를 제공합니다.
맨 먼저 살펴볼 내용은 요소검사입니다. 웹페이지를 크롬에서 확인하는 도중에 오른쪽 버튼을 클릭하면 요소검사라는 항목이 나옵니다.
이를 클릭하면, 현재 화면에 보여지고 있는 실제 html과 스타일을 보여주는 창이 나타납니다. 중요한 것은, 스크립트에 의해 생성된 모든 소스까지 확인해 볼수 있다는 점이죠. 하지만, 이것까지만 하면 흔히 볼수 있는 소스보기와 별반 다를게 없습니다.
아래에서 뒤쪽에 보이는 것이 웹페이지이고, 앞에 뜬 창이 요소검사 창입니다.
파란색으로 선택된 항목을 보면, Exif플러그인 제어하면서 추가된 스크립트가 document.wirte 구문을 이용해서 생성한 문장입니다. 즉, 실제 html로 작성된 문장이 아니란 뜻이죠. 그리고, 요소검사에 나타나는 html은 브라우저에 보여지기 위해서 모든 프로세싱이 끝난 상태를 의미합니다.
이번엔 파란색으로 된 부분을 선택하니까, 해당 요소가 가지는 스타일 정보가 오른쪽에 나타납니다. 요소의 실제 스타일을 곧바로 확인해 볼수 있게 됩니다. 또, 스타일 부분중 취소선으로 표현된 부분이 있습니다. 그 부분은 스타일이 무시되었다는 걸 의미합니다.
위는 .article .ariticle_post 의 padding 설정이 .article_post의 설정보다 우선순위가 높아서 해당부분이 무시된 경우입니다.
이번에는 뒤쪽 웹페이지를 보겠습니다. 요소검사창에서 파란색으로 선택된 요소에 해당되는 부분이 노란색으로 선택되어 있는 모습을 확인 할 수 있습니다. (이를 위해선 마우스 포인터를 보고싶은 요소 위에 올려두면(mouseover) 됨)
한가지 예를 더 보겠습니다.
사이드바 설정을 확인하기 위해 해당 부분위에서 요소검사를 클릭하였더니, 위 그림처럼 요소의 영역이 표시가 되는 군요.
결국, 요소검사 창과 브라우저가 서로 연동이 되고 있다는 걸 의미합니다. 이를 통해서, 보여지는 부분과 html 소스, 적용된 스타일등의 상호작용을 눈으로 확인할 수 있습니다.
크롬에서는 이 외에도 아래와 같은 소스보기 기능(Ctrl+U)도 제공합니다.
또, 스크립트 개발을 도와주는 디버거(Alt + `) 도 제공을 해 주는데, 웹페이지에 적용된 스크립트가 실행되면서 발생하는 모는 에러나 예외를 실시간으로 확인이 가능합니다.
웹페이지 개발까지는 아니더라도, 블로그 스킨이나 스타일 수정같은 약간의 작업만 하려해도 디버깅하는 것이것이 쉽지는 않습니다. 이럴때 이러한 기능을 활용한다면, 보다 쉽게 코딩을 할 수 있으리라 생각됩니다.
'IT 이야기 > 컴퓨터 & 인터넷' 카테고리의 다른 글
| Google 지도 한국어 서비스 시작 (2) | 2008/12/01 |
|---|---|
| 기상청 - 동네예보 서비스 (0) | 2008/10/30 |
| 구글 크롬으로 웹페이지 디버깅(debugging)하기 (2) | 2008/10/28 |
| 클리어타입(ClearType) 글꼴 사용하기 (4) | 2008/10/15 |
| 국립국어원 표준국어대사전 (0) | 2008/10/14 |
| 포털들의 깜찍한 한글날 기념 이벤트~ (2) | 2008/10/09 |
트랙백 주소 :: http://www.crazybar.net/trackback/718
-
Subject: IE8 rc1 - 호환성보기, 개발자도구
Tracked from Crazy Life on Net 2009/03/05 14:23 삭제이번달에 Internet Explorer 8 (이하 IE8)이 정식으로 발표된다고 합니다. 이미 재빠르신 분들을 베타버젼부터 사용하게 계신데요. 저는 release candidate 1 버젼을 받아서 설치해 보았습니다. 전반적인 느낌 일단 외관에서는 IE7과 크게 달라진점이 보이진 않습니다만 전반적으로 좀더 깔끔해진 느낌이 드네요. 성능의 경우는 확실히 IE7보다 많이 빨라진 듯합니다. 여러가지 재미있는 기능들이 추가되었지만, IE6에서 IE7로 옮..
댓글을 달아 주세요
잘 읽었습니다.
크롬에 좋은 기능이 있었군요. 크롬을 이제까지 사용하지 않았었는데 당장 사용해봐야 겠네요.
좋은 하루 되세요.
안녕하세요.
두서없이 쓴 글인데... 감사합니다. ^^
어쨌든, 다른 브라우저에서 보지 못한 좋은 기능인것 같습니다.