크롬 개발자도구

1. option + command + i : 브라우저에서 개발자도구 단축키

2. 문서 내 이미지 등 요소 바로 확인하기

 - 개발자 도구 상단 좌측에 select element from browser to inspect 버튼 클릭 후 요소 클릭

3. elements 패널

 - 문서의 html, css 요소 확인 가능

 - css의 경우 바로 수정하여 변동사항 확인 가능

3. console 패널

 - 간단한 Javascript 테스트시 활용

 - function 작성시 shift + enter로 줄바꿈하여 코드 작성 가능

4. source 패널

 - 해당 사이트의 폴더 트리 구조, 파일, 소스 확인 가능

 - 디버깅 : 소스 패널의 JS 파일 내에서 코드를 선택시 해당 코드까지만 실행하고 멈춤. 소스 코드의 문제를 파악하는 디버깅에 활용

5. Network 패널

 - 웹사이트 내에서의 통신, 호출 행동 등을 확인 가능 (preview : 호출한게 무엇인지 빠르게 확인 가능)

 - 웹사이트 로딩시 호출된 이미지, 자바스크립트, 폰트 등 확인 가능

 - xhr 탭 : 프론트엔드에서 백엔드로부터 받아오는 api 호출 건이 무엇인지 확인 가능

  * xhr 중요 : 제대로 api를 호출했는지, 응답은 제대로 왔는지를 확인할 수 있기 때문에 중요

6. Application 패널

 - storage, 쿠키 정보, 유저 정보 저장 정보를 확인할 수 있음