[테크노트] net Panel in firebug

카테고리 없음

by TISTORY 2011. 4. 14. 02:28

* 넷 패널은 무엇인지

* 넷 패널 쿠폰 ㅠㅠ -firebugs

넷 패널의 주 목적은 웹 페이지에 의해서 일어나는 HTTP 트래픽을 모니터링하고, 모아지고 계산된 모든 정보를 표시하는 것이다. 그 내용은 요소의 리스트로 이루어져 있는데, 각각의 요소는 페이지에 의해 발생하는 하나의 round trip (요청/응답)을 나타낸다.

* options mini menu

- Disable Browser cache - 브라우저 HTTP 캐시 사용 여부

- Show Paint Events - 페인트 이벤트가 넷 패널 내에서 수직줄로 표시될수 있게 한다.

- Show BF Cache Responses - HTTP 응답이 BFCache로 부터 온 것인지를 나타낼수 있게 한다.

* Break on XHR - Break on XHR 이것을 클릭하면, XMLHttpRequests 리스너를 사용할 수 있다. XHR이 만들어진 상태라면, 디버거는 스크립트 실행을 잠시 중지하고 스크립트 패널로 이동한다.

* Clear - 말 그대로 모든 요소 리스트를 지운다.

* Persist - 이 옵션이 켜진 상태인 경우, 페이지를 리로딩 해도 요청 리스트의 요소들이 지워지지 않는다. 페이지 요청에 따라 묶여져서 보이므로 페이지를 리로딩 할때마다 페이지 제목을 루트로 하는 트리 구조의 응답이 생긴다.

* Filters - 요청들 중 원하는 걸러내서 볼 수 있다. 다음은 현재 구현된 필터들이다.

- All - 모든 요청

- HTML - HTML 파일

- CSS - CSS 파일

- JS - 자바스크립트 파일

- XHR - XMLHttpRequest

- Images - 이미지 파일

- Flash - 플래시 파일

- Media - 미디어 파일(*.ogg, *.mpeg 등등)

* Search

다른 요청 안에서 검색이 가능하다. 대소문자 구분, 정규식, 요청 body 내에서의 검색과 같은 옵션이 있다.

* Request List

넷 패널의 주요 부분은 요청 리스트이다. 넷 패널이 활성화된 상태에서 페이지가 로드되면, 페이지에 의해 생성되는 HTTP 요청들로 채워진다. 각 요소는 요청에 대한 기본 정보와 로딩 흐름을 시각적으로 표현한 타임 라인을 보여준다.

- HTTP 요청 메소드

- HTTP 응답 코드와 설명

- 요청한 파일 이름(축약되어있고, 마우스를 갖다 대면 전체 URL 로 표시된다)

- 응답을 해준 도메인 이름

- 응답 사이즈

- 시각적인 타임라인과 로드 타임 정보

요청 리스트 마지막에는 총 요청 횟수와 총 파일 크기, 총 페이지 로드 시간이 요약되어 있다

* Request and Response Details

각 요청 요소는 클릭해서 추가적인 정보를 더 볼수가 있다. 이 하나의 응답 요소는 사실 서버로 보내지는 요청과 돌려 받는 응답 이렇게 두개로 이루어져 있다. 응답이 서버에서 오든, 브라우저 캐시에서 오든, 하나의 요청-응답 round trip은 리스트의 한 요소에서 누락되지 않고 표현된다. 각 요청에서 몇가지 탭이 있다. 요청 메소드와 요청하는 파일 타입에 따라 추가적인 탭과 그 외의 정보가 있으르 수 있다.

- Headers: 현재 요청에 대한 요청 헤더와 응답 헤더를 나열한다.

- Response: 응답 내용을 (정리하지 않고) 보여준다.

- Params: GET 요청시 URL 파라미터를 보여준다.

- Post: POST 요청시 POST 파라미터를 보여준다.

- HTML: HTML 파일에서 렌더된 HTML 결과(페이지)를 보여준다.

- JSON: DOM 패널과 비슷한 트리 구조로 나타낸 JSON 데이터를 보여준다.

- XML: HTML 패널과 비슷한 트리 구조로 나타낸 XML 데이터를 보여준다.

- Cache: 현재 요청에 대한 캐시 정보를 나열한다.

이 외에도 파이어버그 확장에 따라 다양한 탭이 추가될수 있다. 예를 들어 FireCookie 확장을 사용하면 요청에 대해 보내고 받는 모든 쿠키를 보여주는 Cookies 탭을 사용할 수 있다.

* Cache Info

어떤 파일들은 브라우저 캐시에서 가져오기도 한다. 이들은 "304 Not Modified" 응답 상태로 알수 있다. 캐시 탭은 다음과 같은 정보를 포함한다.

- Last Modified: 캐시가 수정된 마지막 시간

- Last Fetched: 캐시가 접근된 마지막 시간

- Expires: 캐시가 파기되는 시간

- Data size: 캐시의 데이터 크기

- Fetch Count: 캐시가 접근된 횟수

- Device: 캐시를 저장하고 있는 디바이스의 id

* Timeline

페이지 로드 성능에 관한 정보를 볼때 유용하게 쓰인다. 넷 패널은 시간 데이터와 함께 요청 로딩 시간을 시각적으로 나타낸다.

- Request Timeline: 모든 요청-응답 round trip 은 타임라인 내에서 수평 바로 표현되고, 몇개의 부분으로 이루어지고 각각 다른 색깔로 표현된다. 마우스를 갖다 대면 각 부분에서 시간 정보를 자세하게 확인할 수 있다.

- DNS Lookup: DNS 처리 시간

- Connection: TCP 커넥션을 생성하는데 걸리는 시간

- Blocking: 브라우저 큐 안에서 네트워크 커넥션을 기다리는 시간(일반적으로 큐잉이라고 한다) SSL 커넥션은 SSL 핸드셰이크와 OCSP 유효 단계를 포함한다.

- Waiting: 서버로부터 요청을 기다리는 시간

- Receiving: 서버로부터 모든 요청을 완전히 받는데 드는 시간(캐시 파일 포함)

- DOMContentLoaded: DOMContentLoaded 이벤트가 발생하는 시점(요청 시작 이후에, 요청이 이벤트 후에 시작되는 경우 음수값이 될수 있다)

- loaded: 페이지 로드 이벤트가 발생하는 시점(요청 시작 이후에, 요청이 이벤트 후에 시작하는 경우 음수값이 될수 있다)

* 폭포수 그래프 시간 범위

왠만한(가능한) 범위에서 x 축을 지키기 위해서, 폭포수 그래프는 시간을 끊고 나중에 시작된 새로운 요청을 시작부터 다시 보여준다. 다시 말하면 이전 요청이 끝나고 미리 정의된 시간(초기값은 1초) 후에 시작하는 요청은 그래프에서 0에서 시작한다. 이것은 끊임 없이 x축이 늘어나서 읽기 힘들어 지는 것을 막는다. millisecond 단위로 시간 차를 세팅할 수 있는 extension.firebugsnetPhaseInterval 속성은

1. console panel: 콘솔 패널은 자바스크립트의 커맨드 창을 제공하고, 모든 메시지를 나열하고, 자바스크립트 명령 프로파일러를 제공한다.

- Break on All errors: 에러가 발생하면 즉시 스크립트를 멈춘다.

- Clear: 콘솔에 나와 있는 메시지들을 지운다.

- Persist: 페이지가 리로드 될때 콘솔을 새로고침 하지 않는다.

- Profile: 자바스크립트의 동작을 프로파일할 수 있게 해 주는 옵션이다.

- Command line

자동 완성, 시즐과 같은 객체 접근법 제공,

$(id), $$(selector), $x(xpath), $0: 현재 선택한 객체, $1: 바로전 선택한 객체, $n(index): 최근 선택한 마지막 다섯개 객체, dir(object), dirxml(object), cd(window), clear(), profile(profileEnd), monitorEvents(unmonitorEvents), debug(undebug), value(object), keys(obejct)

- Console

에러: 자바스크립트, CSS, XML, 윈도우 안, 네트워크, 스택 트래이스 중 발생하는 에러 메시지

경고: 자바스크립트, CSS 중 발생하는 경고 메시지

Info: 정보적인 메시지

Debug: 디버깅 메시지

* 에러나 경고 메시지를 클릭하면 적잘한 패널로 넘어간다. 오른쪽 마우스 버튼은 메시지를 복사하거나 브레이크포인트를 걸 수 있다.

* 프로파일링: 패널 메뉴의 버튼을 통해 자바스크립트를 프로파일할수 잇다. 프로파일러가 활성화된 상태에서 수행되는 모든 자바스크립트 명령은 호출되는 더 자세한 정보와 함께 나열된다.

2. HTML 패널

* back/forward cache

이 캐시의 목적은 브라우저의 네비게이션 히스토리를 빠르게 만드는 것이다(일반적인 HTTP 캐시와는 다르다) BF 캐시의 흐름은 HTTP 동작이 없고(그래서 빠름), 그래서 지금까지 넷 패널에서는 요청으로 보이지 않았다. BF 캐시는 회색으로 나타나고, 200 OK 로 표시된다.