파이어버그 ?
HTML, CSS, JAVASCRIPT 코드 네트워크 트래픽을 모니터링하고, 편집 디버깅 할 수 있는 툴입니다. 특히 ajax 디버깅에 유용합니다.
다운로드 & 실행
파이어버그는 공식 사이트인 http://www.getfirebug.com 에서 다운로드 & 설치가 가능합니다.
실행은
F12 키 또는 Ctrl + F12키로(새창) 실행이 가능합니다.
아래 이미지는 파이어버그 실행 화면 입니다.
1.HTML , CSS 도구
HTML, CSS 조사 및 편집에 이용되며 레이아웃 수정에도 사용됩니다. 퍼블리셔나 디자이너에게
코딩된걸 받으면 프로그램을 적용시키는 과정에서 기존의 레이아웃이나 HTML코딩을 수정해야 할 경우가 생기는데
그때 사용하면 좋습니다.
실행을 하면 아래와 같은 화면이 나옵니다.
위 이미지에 나오는 빨간박스(Inspect)버튼을 클릭한 후 화면을 선택하면 선택된 영역의 HTML 소스 및 스타일, 레이아웃이 나옵니다. 수정을 원할경우 "편집" 버튼을 누르거나 스타일, Computed, 레이아웃 텝을 클릭 후 변경 하면 됩니다.수정 내용은 실시간으로 적용됩니다.
2. 콘솔
자바스크립트 콘솔 메세지가 출력이 되며, (에러나 경고 XHR메세지등) 자바스크립트 명령 실행이 가능하다. 또한 이 기능을 통해 DOM을 조사하거나 소스 디버깅에 유리하다. 자바스크립트 명령어 사용시 코드 인텔리전스가 지원이 되서 쉬운 코딩이 가능합니다. 일반적인 개발 & 디버깅시 가장 많이 사용 하는 부분입니다.
콘솔창에서 사용 가능한 대표적인 명령어로는
1. console.log()
->콘솔창에 메세지를 출력하는 일을 합니다. js소스상에서 넣어스 씁니다.
2. console.time(val),console.timeEnd(val)
-> 타이머를 끝낸 뒤 콘솔에 시간을 표시합니다.
3. console.profile(val), console.profileEnd()
-> 부분적으로 프로파일 할때 사용합니다. 콘솔 API인 프로파일링을 할경우 전체를 하므로 시간도 오래걸리고 원하지 않는 부분도 프로파일이 되므로 ..원하는 부분만 프로파일 할때 사용 합니다.
나머지 텝으로는 DOM 과 NET이 있는데 그 부분 설명은 생략 하겠습니다.
'Web Development。 > Tip。' 카테고리의 다른 글
| 파이어버그 사용법 1.HTML CSS 수정 (0) | 2012/03/29 |
|---|
