6-1.크롬 개발자도구 둘러보기

​

Elements탭은 웹페이지를 구성하는 태그들을 분석 열람하고 수정할 수 있는 기능이다.

​

​

​

Resources탭은 웹페이지를 표현하는데 동원되는 여러가지 리소스들

​

가령, html코드라던지, html코드안에 삽입되어있는 이미지라던지 또는 웹페이지의 클라이언트 사이드에서 저장

​

되어있는 쿠키라던지 그런 여러가지 정보들이 들어가있다.

​

​

​

​

Network탭은 이 웹페이지를 로드하기 시작했을때부터 웹페이지안에 포함되어있는

​

이미지나 리소스들을 네트워크를 통해 가져오는 모습을 보여주는 기능을한다.

​

각각의 리소스를 가져오는데 얼마나 많은 시간이 걸리고, 어떤 순서로 리소스를 가져오고

​

또 그 리소스를 가져올때 어떤 요청이 가고 응답이 오는지 이런정보가 포함되어있다.

​

​

​

​

​

Sources탭은 웹페이지안에 삽입되어있는 JavaScript를 디버깅하기위한 용도인데

​

이 디버거를 통해서 스크립트를 한줄한줄 실행하면서 어떤 문제가 있는지

​

혹은 정확하게 잘 작동하고 있는지 추적할 수 있는 편리한 기능을 제공한다

​

​

​

​

​

Console탭은 JavaScript 명령을 실시간으로 입력해볼 수 있는 기능이다.

​

가령, JavaScript에서 경고창을 띄워주는 명령 즉, alert를 쓰면

​

이런식으로 뜬다.

​

​

다른기능으로는 로깅이라는 기능을 제공하는데, Element의 코드들중에 찾고싶은 태그나 속성을 찾아주기도 한다