크롬 개발자도구란?

# 크롬 개발자도구란?

: 크롬이나 익스플로러와 같은 브라우저들은 기본적으로 개발자도구라는 툴을 제공해준다. 이러한 툴들은 브라우저마다 차이가 조금씩 있지만 대부분이 비슷한 일을 한다. 이러한 개발자도구를 제공해주는 이유는 HTML, CSS JavaScript와 같은 언어들은 서버로부터 컴파일이 되어져서 실행이되는게 아니라 브라우저에서 실행이되는 언어들이다. 브라우저에서 런타임에 해석이되고 실행이 되어 진다. 따라서 브라우저가 해석을 잘하고 있는지 확인하기 위해 크롬 개발자도구와 같은 툴을 사용한다.

# 크롬 개발자도구의 기능

: HTTP 통신과정, HTML구조,  CSS 스타일, JavaScript 디버깅, 프로파일링, 성능진단 등을 할 수 있으며 그 기능이 다양하고 많아지고 있다.

# Elements 탭

: HTML 구조가 보이고 각 태그별 내용을 확인할 수 있는 탭이다. HTML, CSS를 어떻게 해석하고 화면에 표시했는지 실제 Rendering결과를 보여준다. 돋보기 버튼(좌측 상단의 마우스커서 버튼)을 이용하여 화면에서 해당하는 HTML이 어떤 것이 있는지 확인할 수 있다. 

Elements 탭의 Styles탭에서는 CSS 수정 등 CSS 디버깅을 할 수 있다. CSS 수정이 된 최종렌더링 결과는 Computed 탭(또는 Styles 탭의 오른쪽)에서 확인할 수 있다.

EventListeners 탭에서는 각 태그에 추가되어 있는 이벤트 리스너(클릭, 키업 등)들을 확인할 수 있다.

# Console 탭

: 자바스크립트 개발을 위한 탭으로 자바스크립트의 작은 코드를 브라우저 자바스크립트 파서를 통해서 즉시 실행해볼 수 있는 기능을 제공한다. 함수를 추가하거나 변수에 저장된 값을 확인하는 등의 작업을 할 수 있다. 단축키 ESC로 모든 탭에서 쉽게 불러와 사용할 수 있다.

아래와 같이 변수에 값을 대입 후 enter를 치면 바로 실행이 되버린다.

이때는 Shift + Enter를 이용하여 다음줄로 이동할 수 있다. 

# Sources 탭

: 자바스크립트 디버깅을 할 수 있는 탭으로 자바스크립트 실행 중 브레이크 포인트를 걸어 그 시점의 scope 내 변수를 확인할 수 있다. 자바스크립트는 브라우저에서 런타임시에 즉, 실행되는 시점에서 바로 해석이 되는 언어(인터프리터 언어)이기 때문에 브라우저 내에서 실행되는 시점에 자바스크립트 코드가 어떻게 해석되고 있는지 브레이크 포인트를 걸어 멈춰놓고  그 안의 변수값 등을 확인해 볼 수 있는 것이다.

아래의 사진과 같이 Elements 탭에서 마우스커서 버튼을 이용하여 특정 태그를 선택하여 해당하는 태그에 브레이크 포인트를 걸어줄 수 있다. 아래는 태그선택 후 속성이 변경되는 경우 브레이크가 걸리게 포인트를 설정하는 경우이다.

Elements탭에서 브레이크포인트를 건 후 Sources탭에서 아래와 같이 브레이크 포인트를 건 부분을 확인할 수 있다. (DOM Breakpoints 부분)

실제 브레이크가 걸리면 아래의 사진과 같이 Scope탭에 각종 변수들이 나오는데 지역변수, 전역변수 등을 확인할 수 있고 이때 ESC를 눌러 Console탭을 활성화 후 아래와 같이 해당 값을 확인하는 등의 작업이 가능하다.

Scope옆의 Watch탭에서는 +버튼으로 변수를 추가하여 해당변수의 변화과정을 지켜볼 수 있다.

# Network 탭

: HTTP 통신과정을 들여다볼 수 있다. 브라우저에서는 많은 자원들을 서버로부터 response(응답)받아야 되는데 Network탭을 통해서 어떠한 자원들이 어느정도의 크기로 얼마의 시간을 가지고 내려받아지는지 자세히 들여다 볼 수 있다. 브라우저와 서버간 통신과정 중에 어떤 문제가 있는지확인하고 클라이언트 성능 개선 지점을 분석하고 찾기위해 다양하게 활용할 수 있다.