Firebug에 대한 정보는 쿠나님 포스트가 있으니 한번 보시는 것도 좋겠습니다.
이 기능은 Google Chrome 4에서 따로 설치하지 않고 내장되어 있는 기능입니다. (4.0.206.1버젼을 중심으로 작성되었습니다.)
구글 크롬4를 사용하신다면 Developer Tools의 기능을 사용하실 수 있을거라 생각되네요. (4.0.203.4 버젼에서는 이기능이 작동하지 않습니다. 현재 최신 버젼인 4.0.206.1 버젼으로 업데이트하시면 정상적으로 작동됩니다.)
정식 버젼인 2.0 버젼대는 잘 모르겠습니다.(테스트 해보지 않아서..^^;)
Developer Tools 실행하기
마우스 오른쪽 클릭으로 요소 검사(N)을 클릭하여 실행합니다.
또는
또는
현재 페이지 관리 > 개발자 정보 > Developer Tools를 클릭합니다.
Developer Tools Elements 기능
수정할 부분을 더블클릭해서 수정할 수 있고
하단에 돋보기 모양을 클릭한후 보고싶은 소스의 부분을 클릭하시면
저는 이미지를 클릭했습니다.
이미지 태그가 바로 창에 뜹니다.
이런식으로 HTML,CSS,JS를 쉽게 수정하셔서 테스트 해보는 과정을 거치실 수 있습니다.
Developer Tools Resources 기능
이 기능은 페이지의 로딩 속도를 측정하는 기능 입니다.
Enable resource tracking 을 클릭합니다.
페이지 로딩속도가 표시되네요.
제 블로그는 평균 1.5~2.0초 가 걸리네요 ㅠㅠ 이거 반성하면서 속도를 높여야겠습니다 orz..
아래에는 이미지,스크립트,CSS 로딩속도가 표시됩니다.
다른기능들도 더있습니다만, 여기까지만 적겠습니다^^;
Posted by Yaluka
