[Dreamhack] 개발자 도구(DevTools)와 레이아웃 + 요소 검사 + 디바이스 툴바 + Application + Sources + Network + Secret browsing mode

1 - 0 - 3. 개발자 도구(DevTools)와 레이아웃 + 요소 검사 + 디바이스 툴바 + Application + Sources + Network  + Secret browsing mode

 

 

 

# 개발자 도구(DevTools)

: 웹 페이지를 진단할 때 사용하는 브라우저 도구

 

 

- 개발자 도구 실행법

: 브라우저에서 F12 클릭

 

 

 

 

# 개발자 도구의 레이아웃

요소 검사 및 디바이스 툴바

기능 선택 패널

현 페이지에서 발생한 에러 및 경고 메시지

개발자 도구 설정

 

 

 

- 기능 선택 패널의 주요 기능들

Elements	Console	Sources	Network	Application
페이지 구성 HTML 검사 및 읽기, 수정(단축기 F2)	프론트엔드 자바스크립트 코드 실행 및 결과 확인	페이지 구성 리소스 확인 및 디버깅	서버와 오가는 데이터 확인	웹 어플리케이션 관련 데이터 확인

 

 

 

- 요소 검사

: 특정 요소의 개괄적인 정보 파악 및 코드 탐색 가능

 

 

 

- 디바이스 툴바(Device Toolbar)

: 브라우저의 화면 비율 및 User-Agent 값을 설정 가능

 

 

 

- Sources

: 현재 페이지를 구성하는 웹 리소스 확인 가능

현 페이지의 리소스                                           선택된 리소스 상세 보기                                                         디버깅 정보

파일 트리 및 파일 시스템

 

 

+ 디버깅 정보 상세 기능

Watch	Call Stack	Scope	Breakpoints
자바스크립트 식 입력 후 코드 실행 과정에서 해당 식의 값 변화 확인	함수 호출 순서를 가장 나중에 호출된 함수가 가장 위에 위치하게끔 스택 형태로 보여줌.	정의된 변수들의 값 확인	브레이크포인트 확인 및 활성/비활성 작업 수행

 

 

 

- Network

: 서버와 오가는 데이터 확인

로깅 중지 및 로그 삭제

로그 필터링 및 검색

기타 옵션

네트워크 로그

네트워크 로그 요약 정보

 

 

+ 기타 옵션 상세

-->  Preserve log : 새 페이지로 이동해도 로그를 삭제하지 X

-->  Disable cache : 이미 캐시된 리소스도 서버에 요청

 

+ 로그란?

컴퓨터 이용 상황이나 접속 정보 등의 기록을 가지고 있는 것

+ 캐시란?

자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소

 

 

 

- Application

: 쿠키, 캐시, 스타일시트 등 웹 애플리케이션 관련 리소스 조회 가능

 

+ Cookies에서 브라우저에 저장되어있는 쿠키 정보 확인 및 수정 가능

 

 

 

 

# Secret browsing mode

: 브라우저를 종료했을 때 방문 기록이나 양식 입력 정보 등이 저장되지 않는 모드

 

+ 일반 모드의 브라우저들은 대개 쿠키를 공유하지만 시크릿 모드로 생성된 탭은 쿠키를 공유하지 않음

+ 하나의 사이트를 많은 세션으로 사용이 가능하여 다수의 계정으로 서비스를 점검할 때 유용