웹브라우저 크롬 Chrome 요소 검사, 개발자 도구에서 스트리밍을 모니터링 하는 툴

상용 프로그램으로 "HttpWatch, HTTP 스니퍼 툴. 웹브라우저에서 각종 스트리밍을 모니터링해 주는 툴" 이 있는데요..
웹브라우저 크롬에 기본 장착되어 있는 도구만 사용해도 나쁘지 않습니다.

크롬 웹브라우저에서 여백에 마우스 커서를 두고 마우스 오른쪽 버튼으로 클릭하면,
아래 그림과 같이 '요소 검사(N)' 메뉴가 보입니다. 클릭해 보세요

자, 아래 그림과 같이 스트리밍 정보가 주르륵 나옵니다.
해당 웹페이지를 보여주기 위해 필요한 각종 요소들이 나오고 시간이 얼마나 소요되었는지도 알 수 있습니다.
해당 웹페이지에 기술되어는 있지만, 해당 요소가 없는 경우도 아래 그림과 같이 빨간색으로 표시가 됩니다.
Ajax 로 호출되는 웹페이지의 내용도 볼 수 있고(Json 정보도 당연히 보이죠),
웹페이지가 호출되는 PC(모바일 기기)의 웹브라우저 정보도 약간 보여집니다. 기기에 대한 정보를 살짝 맛볼 수 있지요.
호출될 당시의 form 요소들도 알 수 있습니다. 파라미터 주고 받는 것을 한 눈에 볼 수 있는 것이죠.
해당 요소의 Name 을 클릭해 보시면 압니다.

웹프로그램의 Name 을 클릭하면,
오른쪽 본문 창에 'Headers', 'Preview', 'Response', 'Cookies', 'Timing' 메뉴가 표시됩니다.

아래 그림 처럼, 'Form Data' 요소들이 표시됩니다.
개발자 입장에서 호출되는 웹페이지의 파라미터를 알아내기 위해 시스템 로그를 일일이 기술할 필요가 없는 거죠.

이 외에도 다양한 정보가 나옵니다.
소스코드가 화면에서 어느 부분에 해당하는 것인지, CSS 는 어떻게 적용되었는지 등을 볼 수 있습니다.


Network 탭 하단 화면에서 Documents 를 선택하면 HTML(DOM) 코드가 들어있는 파일들만 왼쪽에 목록으로 보여줍니다.

아래 그림의 빨간 동그라미가 'Preserve Log upon Navigation' 으로, 기본은 회색으로 꺼져있고 켜 놓으면 빨간색이 됩니다.
회색이면, 화면 전환이 이루어지는 경우 맨 마지막 화면을 구성하는 요소들만 나열되고..
빨간색이면, 화면 전환이 시작하면서부터 맨 마지막 화면 전환까지 열려진 모든 요소들이 나열됩니다.
회색 동그라미에 왼쪽 위에서 오른쪽 아래로 사선이 그려진 이미지는 'Clear' 입니다. 목록 정보를 삭제합니다.

.Fine.