웹 브라우저편

개발자 도구 

1. 빨간색 : 요소 검사 및 디바이스 툴바
2. 주황색 : 기능을 선택하는 패널. 코스에서는 굵게 처리된 기능들만을 다룬다.

• Elements : 페이지를 구성하는 HTML 검사
• Console : 자바 스크립트를 실행하고 결과를 확인할 수 있음
• Sources : HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디벼깅할 수 있음
• Network : 서버와 오가는 데이터를 확인 가능
• Performance
• Memory
• Application : 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터 확인 가능
• Security
• Lighthouse

 

3. 노랑색 : 현재 페이지에서 발생한 에러 및 경고 메시지

4. 초록색 : 개발자 도구 설정

 

요소 검사 : 요소 검사 활용 시 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있다.

디바이스 툴바 : 현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경 가능

Elements : HTML 읽기 및 수정 가능. 수정 시 코드를 선택한 상태로 단축기 F2를 누르거나 더블 클릭하면, 이를 수정할 수 있습니다. 요소 검사 기능을 같이 활용하면 수정할 코드를 빠르게 선택할 수 있어 편리하다.

Console : 프론트엔드의 자바스크립트 코드에서 발생한 각종 메세지를 출력하고, 이용자가 입력한 자바스크립트 코드를 실행해주는 도구이다.

Sources : 현재 페이지를 구성하는 웹 리소스들을 확인 가능하다.

Network : 서버와 오가는 데이터를 확인 가능하다. 원하는 항목을 선택하면 해당 요청 및 응답 데이터 확인 가능. 

• 빨 : 로깅 중지 및 로그 전체 삭제
• 주 : 로그 필터링 및 검색
• 연 : Preserve log - 새로운 페이지로 이동해도 로그 삭제x , Disable cache - 이미 캐시된 리소스도 서버에 요청
• 노 : 네트워크 로그
• 파 : 네트워크 로그 요약 정보

 

Network:Copy

: 로그를 우클릭하고, Copy에서 원하는 형태로 복사 가능. Copy as fetch로 HTTP Request를 복사하고 Console 패널에 붙여서 실행하면, 동일한 요청을 서버에 재전송할 수 있다.

 

• Application : 쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있다. Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고, 수정 가능. 
• 페이지 소스 보기 단축키 : Cmd + Opt + U
• 시크릿 모드 단축키 : Cmd + shift + N (브라우저 종료 시 방문 기록, 쿠키 및 사이트 데이터, 양식에 입력한 정보, 웹사이트에 부여된 권한이 저장되지 않습니다.)