이미 웹 개발자들 사이에서는 널리 알려진 툴이지만 개인적으로 주로 사용하는 기능관련하여 간단히 소개하고자 한다.
Firebug는 Firefox Add-on 사이트에서 다운로드 가능하며 Firefox에서 바로 설치 가능하다.
1. HTML, CSS - 검사"inspection"를 선택한 후 페이지내에서 원하는 오브젝트를 선택하면 해당 HTML 소스로 이동한다. 오른쪽에는 CSS 페이지의 속성이 적용된 위치도 같이 나타내준다. 레이아웃을 선택할 경우 박스 모델(Box Model)의 Content, Margin, Padding, Boarder의 정보를 볼 수 있다. 또한 자신이 원하는 위치에서 바로 수정하여 페이지를 확인해 볼 수 도 있다.
2. NET - 브라우저 내에서 HTTP Request / Response 한 정보들을 보여준다. Header정보들을 한눈에 볼 수 있어 간단한 페이지 응답 결과를 확인 할 때 주로 사용한다.
3. DOM - 브라우저 마다 DOM Tree를 구성하는 방법은 조금씩 틀리지만 Firefox의 DOM Inspection을 통해서도 원하는 정보를 얻을 수 있다.
4. Cookie - 쿠키 관련 정보를 따로 정리하여 보여주는 기능이다. 쿠키 정보를 이렇게 함부로(?)보여줘도 되는지 모르겠지만 유용한 툴임에는 확실하다.
5. Javascript - 자바 스크립트 관련한 정보를 한눈에 볼 수 있다. 자주 사용하지는 않지만 가끔 자바스크립트가 페이지에서 어떻게 구성되어 있는지 분석하는데 유용하다.
Firebug는 Firefox Add-on 사이트에서 다운로드 가능하며 Firefox에서 바로 설치 가능하다.
1. HTML, CSS - 검사"inspection"를 선택한 후 페이지내에서 원하는 오브젝트를 선택하면 해당 HTML 소스로 이동한다. 오른쪽에는 CSS 페이지의 속성이 적용된 위치도 같이 나타내준다. 레이아웃을 선택할 경우 박스 모델(Box Model)의 Content, Margin, Padding, Boarder의 정보를 볼 수 있다. 또한 자신이 원하는 위치에서 바로 수정하여 페이지를 확인해 볼 수 도 있다.
2. NET - 브라우저 내에서 HTTP Request / Response 한 정보들을 보여준다. Header정보들을 한눈에 볼 수 있어 간단한 페이지 응답 결과를 확인 할 때 주로 사용한다.
3. DOM - 브라우저 마다 DOM Tree를 구성하는 방법은 조금씩 틀리지만 Firefox의 DOM Inspection을 통해서도 원하는 정보를 얻을 수 있다.
4. Cookie - 쿠키 관련 정보를 따로 정리하여 보여주는 기능이다. 쿠키 정보를 이렇게 함부로(?)보여줘도 되는지 모르겠지만 유용한 툴임에는 확실하다.
5. Javascript - 자바 스크립트 관련한 정보를 한눈에 볼 수 있다. 자주 사용하지는 않지만 가끔 자바스크립트가 페이지에서 어떻게 구성되어 있는지 분석하는데 유용하다.
Leave your greetings.