크롬 개발자도구 알아보기

개발자 도구란?

• 개발자 도구는 브라우저에 제공하는 하나의 도구(tool)입니다.
  (Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc)
• 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와줍니다.

개발자 도구 진입 방법

크롬 개발자모드로 진입하는 방법은 간단하게 2가지입니다.
1. 검수하고자 하는 웹사이트에 접속해서 우클릭, 검사메뉴로 진입합니다.
2. 단축키를 사용합니다. 맥은 <command+option+I>, 윈도우는 <ctrl+shift+I>나 를 누르면 해당 모드로 진입합니다.

• 개발자도구는 크게 패널 메뉴와 패널 영역으로 나누어져 있습니다. 우리는 주로 패널메뉴 앞단의 내용을 가지고 작업하게 될 것입니다.
• 개발자 도구에는 여러 개의 panel(tab)이 존재합니다.

1. Elements 패널

Elements 패널 구성

1. Elements : HTML 태그가 표시되는곳
2. Styles : 선택된 태그의 모든 CSS가 표시되는곳
3. Computed : 선택한 태그의 최종 CSS가 표시되는곳

Styles와 Computed의 차이
Styles는 개발자가 해당 태그에 적용한 모든 CSS가 표시된다.
Computed는 태그의 부모와 자식 간의 관계나 우선순위를 통해 최종적으로 선택된 CSS가 표시된다.

Elements 기능

• 웹 페이지의 구성 (DOM)
• 구성요소의 스타일 속성 (CSS)
• CSS 수정, UI 수정 ...

Styles 부분의 순서가 의미하는 것은?

• 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
• 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
• cf) CSS Specificity - inline style > id > class > tag

user agent stylesheet 란?

• 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.

2. Console 패널

: 웹브라우저에서 발생하는 모든 메시지를 표시하는 커멘드 콘솔

웹페이지 로딩 중에 발생한 경고, 에러 메시지가 표시되며, 자바스크립트 실행 오류나 자바스크립트 콘솔 메시지 출력 또한 출력됩니다.

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

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

3. Source 패널

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

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

4. Network 패널

Network 패널 기본 영역

네트워크 탭에 진입하면 아래와 같은 그림이 나온다.

• name : 이름.
• status : 상태 200이면 정상.
• type : js, font, css 종류를 나타낸다.
• size : 불러온 파일의 사이즈.
• time : 해당 파일이 로드되는데 시간.

응답 본문

Requests 테이블 의 Name 열 에서 요청 URL을 클릭 합니다.

Header 영역

: Header 영역의 경우 브라우저에서 요청하는 데이터의 정보를 볼수있습니다.

Preview

: Preview영역의 경우 요청한 데이터의 응답하는 Responce영역의 데이터의 정보를 보기 좋게 확인할 수 있습니다.

Response

: Response영역의 경우 요청한 데이터의 응답하는 데이터의 정보를 나타냅니다.

Network 패널의 기능

• http 네트워크 통신 확인
• API 크롤링, 페이지 로딩 성능 테스트
• 이미지, 영상 등의 소스 (mock data 활용)

5. Application 패널

Application 패널의 기능

• 브라우저 저장소
• Local storage, Session Storage, Cookie

• Storage : 브라우저의 저장소
• Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Cookie : 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.

Local Storage, Session Storage, Cookie 활용

• Local Storage
  - 지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
  - UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
• Session Storage :
  - 잠깐 동안 필요한 정보
  - ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
• Cookie
  - 서비스 직접적이지 않은 데이터
  - 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.