개발자 도구

1. 개발자 도구

웹 브라우저에는 웹 페이지의 작동 원리를 이해하고 디버깅할 수 있는 내장 도구가 포함되어 있다. 크롬, 파이어폭스, 사파리, 엣지 등 주요 브라우저는 모두 개발자 도구(DevTools)를 제공한다. 이 도구들의 UI나 기능에는 약간의 차이가 있을 수 있지만, 기본적인 기능은 유사하다.

주요 기능:

• HTML과 CSS 실시간 확인 및 수정

  • HTML 확인 및 수정: 웹 페이지의 HTML 구조를 실시간으로 확인하고 수정할 수 있다. 요소를 추가, 제거, 변경할 수 있으며, 변경 사항은 즉시 페이지에 반영된다.
  • CSS 확인 및 수정: 웹 페이지의 CSS 스타일을 실시간으로 확인하고 수정할 수 있다. 스타일 속성을 추가, 제거, 변경할 수 있으며, 변경 사항은 즉시 페이지에 반영된다.

• 에러 메시지와 로그 확인

  • 콘솔: 자바스크립트 코드의 에러 메시지와 로그를 확인할 수 있다. 콘솔을 통해 자바스크립트 코드를 직접 실행하고 테스트할 수 있다.

• 네트워크 통신 정보 확인

  • 네트워크 패널: 페이지 로드와 관련된 모든 네트워크 요청을 확인할 수 있다. 요청 및 응답의 헤더, 상태 코드, 전송된 데이터 등을 분석할 수 있다.

• 웹 페이지 성능 분석

  • 성능 패널: 페이지 로드 시간, 자바스크립트 실행 시간, 레이아웃 계산 시간 등 웹 페이지의 성능을 분석할 수 있다. 이를 통해 성능 최적화 포인트를 찾을 수 있다.

• 쿠키, 로컬 스토리지, 세션 스토리지 등 확인

  • 스토리지 패널: 웹 페이지에서 사용하는 쿠키, 로컬 스토리지, 세션 스토리지 등의 데이터를 확인하고 수정할 수 있다.

2. 크롬 개발자 도구 열기

1) 웹 브라우저에서 오른쪽 상단의 점 3개 버튼 클릭
2) More Tools 선택
3) Developer Tools 선택

3. 크롬 개발자 도구 (Chrome Developer Tools)

3.1 Elements 탭

개발자 도구의 Elements 탭은 HTML과 CSS를 실시간으로 확인하고 수정할 수 있는 도구이다.

1) Developer Tools에서 Elements 탭 선택
2) Styles 클릭
3) Show computed styles sidebar 선택