구글 크롬 개발자 도구

1. 분석하고자하는 요소를 "마우스 우클릭 > 검사" or F12(단축키)
　- html 코드는 물론이고 각 요소의 css 정보도 확인 가능

2. 페이지 상의 아무 여백 "마우스 우클릭 > 페이지소스보기"
　- 현재 웹페이지의 모든 html 코드 확인 가능

3. 개발자도구 메뉴중 "Toggle device toolbar" 선택
　- 현재 화면은 물론, 다양한 디바이스에서 웹페이지가 구현되는 모습을 확인 가능

 

Elements -> 태그를 열람하고, 소스 수정하고 실시간보기가 가능한 영역
Resources -> 웹사이트에 사용된 다양한 소스들을 보거나 다운받을 수 있는 영역, 어플리케이션
Network -> 이미지나 리소스를 가져오는데 걸리는 시간, 순서, 어떤 요청과 응답이 이루어지는지 보여주는 영역

                리프레쉬 누르면 웹브라우저와 웹서버가 주고 받는 데이터들을 체크 가능(css, 디자인 관련 작업시 유용)

                (네임, 스태테스, 타입 등의 탭에서 우클릭시 더 많은 탭 있음)

                - headers : general, response headers, request headers

Sources -> 웹 페이지 안에 삽입되어있는 자바스크립트를 디버깅하기 위한 영역

Timeline -> 크롬에서 작동하는 웹페이지의 성능(퍼포먼스)을 측정하기 위한 영역

Profiles -> html, css, js 등의 상태를 측정 할 수 있는 영역

Audits -> 웹페이지의 현재 상태를 체크해서 성능에 악영향을 줄 수 있는 부분에 대해 조언해주는 영역
Console -> 자바스크립트 명령을 실시간으로 입력해 볼 수 있는 영역