- 구글에서 만든 웹 브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공된다.
- 이를 개발자 도구라고 한다.
- 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화할 수 있다.
- Elements : html/CSS 상태 확인
- Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
- Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
- Network : 브라우저에서 발생하는 통신 상태
- Performance(예전 Timeline패널) : 성능 측정
- Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
- Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
- Security : Mixed content 이슈, 인증서 문제 등을 디버깅
- Styles : 선택된 태그의 모든 CSS가 표시되는곳
- Computed : 선택한 태그의 최종 CSS가 표시되는곳
- Styles와 Computed의 차이는
- Styles 패널
- 개발자가 넣은 모든 CSS가 표시됨.
- 취소된 CSS까지 나열됨으로 내용이 굉장히 길고 복잡함
- Computed 패널
- 우선순위를 통해 최종 선택된 CSS만 나열.
- 디자인대로 퍼블리싱되었는지 한눈에 확인 가능.
- Styles 패널
- Computed 패널을 먼저 확인할 것을 권장하는 이유는 디자이너가 CSS 효과를 수정하고 싶을 때 Styles 패널 어디에 해당 CSS가 있는지 손쉽게 안내한다. 또한, 어떤 우선순위를 통해 최종 CSS가 선택되었는지 한눈에 알아볼 수 있다.
- 이 Network 탭에서는 XHR(XMLHttpRequest)를 포함해 JS, CSS, IMG등의 정적 파일까지 로드가 잘 되고 있는지에 대한 정보가 나온다.
- 여기서 XHR은 AJAX 요청을 생성하는 JavaScript API이다.
- 프론트엔드단에서 Rest API를 호출하는 AJAX 요청을 했다면 이 XHR이 생성되게 될 것이다
- 구글에서 검색 기능을 사용했기 때문에, 검색어에 해당하는 검색 결과가 나오는 API가 호출되었을 것이다.
- 그 외 기타 구글에서 연동해 놓은 Rest API에 대해 나온다. 상태가 200이니 서버가 요청을 정상적으로 처리했다는 뜻이다.이들을 하나하나 클릭해 보면 Header, Response, 걸린 시간 등등 다양한 정보를 직접 확인할 수 있다.
- 어떻게 보면 Postman보다도 더 강력한 기능을 제공하기도 한다.이 Network 탭의 기능을 사용하면 직접 만들고 있는 Rest API에 대해 더 효율적으로 오류의 원인을 분석하고 개선할 수 있다.어떠한 이유로 서버에서 블락당했고, 서버에서 어떤 Response를 내놓았으며, 어떤 서버 코드로 오류가 발생했는 지 알 수 있으니까요.
- 화면이 로딩될 때 화면의 로딩 시간이 매우 긴 경우(예를 들어 10초 가량) 사용자는 페이지가 로드되는 동안 깨지고 아직 로드되고 있는 화면을 볼 것 이다. 이 로딩 타임을 줄일 수 없다면 그 동안 화면에 어떤 일이 펼쳐지는지 확인하고 그에 대해 대응할 수 있다.
- 개발자 도구의 Network 탭에서 Capture screenshots를 선택한 뒤 리로드(cmd + R)한다면 우리가 눈으로 직접 확인 할 수 없을 만큼의 짧은 시간 단위로 쪼개어 화면을 캡쳐할 수 있습니다.이에 따라 로딩 중 나타나는 화면 모두를 눈으로 확인 할 수 있다.
