1. 개발자도구 ... 가 뭘까요 ?
- 웹 개발을 진행할 때 다양한 오류가 발생하기 쉬움
- 이때 브라우저의 개발자 도구는 이러한 불편함을 대폭 감소시켜줌2. 개발자 도구 실행 방법
크롬 오른쪽 위 점 세개 버튼 클릭
도구 더보기 클릭
개발자 도구 클릭
- 개발자 도구 맨 위의 Elements 왼쪽 두개 버튼
-> 요소 검사와 디바이스 툴바(브라우저 화면 비율 변경 가능) - Elements ~ Lighthouse
-> Element : 페이지를 구성하는 html 검사
-> Console : 자바스크립트 실행하고 결과 확인 가능
-> Sources : html, css, js 등 페이지를 구성하는 리소스 확인 가능
-> Network : 서버와 오가는 데이터 확인 가능
-> Performance
-> Memory
-> Application
-> Security
-> Lighthouse
3. 기타 기능
- 페이지 소스 보기
- Macos = cmd+opt+U
- Secret browsing mode
- 방문 기록, 쿠키 및 데이터, 양식에 입력한 정보, 웹사이트 권한이 저장되지 않음4. 개발자 도구 추가 설명
개발자 도구 상단 버튼
1) 요소 검사 버튼 (Element Inspector)
페이지의 특정 요소를 선택하여 해당 HTML 구조와 스타일 확인 가능
클릭하면 마우스 커서가 변경되어 페이지의 어떤 요소든 선택 가능
선택한 요소는 Elements 패널에서 자동으로 하이라이트
단축키: Chrome/Edge에서 Ctrl+Shift+C (Windows) 또는 Cmd+Shift+C (Mac)
2) 디바이스 툴바 버튼 (Toggle Device Toolbar)
반응형 웹 디자인을 테스트하기 위한 도구
다양한 모바일 디바이스와 화면 크기를 시뮬레이션 가능
화면 해상도, 디바이스 유형, 방향(가로/세로) 등을 설정 가능
터치 이벤트 에뮬레이션도 가능
단축키: Chrome/Edge에서 Ctrl+Shift+M (Windows) 또는 Cmd+Shift+M (Mac)
주요 패널 기능
1. Elements
웹 페이지의 HTML과 CSS를 실시간으로 검사하고 수정
DOM 구조를 트리 형태로 볼 수 있으며, 요소를 선택하여 속성을 확인하거나 변경
Styles 탭: 선택한 요소에 적용된 모든 CSS 스타일을 볼 수 있으며, 실시간으로 수정 가능
Computed 탭: 모든 CSS가 계산된 최종 스타일 값 보여줌
Layout 탭: Box Model(마진, 패딩, 테두리, 콘텐츠 크기)을 시각적으로 표시
Event Listeners 탭: 선택한 요소에 연결된 이벤트 리스너를 확인
DOM Breakpoints 탭: DOM 조작 시 실행을 중단할 수 있는 브레이크포인트를 설정 가능
2. Console
JavaScript 코드를 실행하고 결과를 확인할 수 있는 대화형 환경
웹 페이지에서 발생한 오류, 경고, 정보 메시지를 확인 가능
console.log(), console.error(), console.warn() 등의 출력 가능
다양한 로깅 레벨 필터링이 가능합니다 (Error, Warning, Info, Verbose).
() 및 $
() 같은 특수 함수를 사용하여 DOM 요소에 빠르게 접근 가능
콘솔 히스토리 기능으로 이전 명령을 다시 불러오기 가능
3. Sources
웹사이트의 모든 소스 코드(HTML, CSS, JavaScript)를 검사하고 편집
JavaScript 디버깅을 위한 중요한 도구로, 브레이크포인트를 설정하여 코드 실행을 단계별로 추적
Watch 기능으로 변수 값을 모니터링
Call Stack으로 실행 중인 함수 호출 스택을 확인
Scope 패널에서 현재 범위의 변수와 값을 확인
Breakpoints 패널에서 설정된 모든 브레이크포인트를 관리
로컬에서 코드를 수정하고 저장할 수 있는 Workspace 기능 제공
4. Network
웹페이지가 로드될 때 모든 네트워크 요청과 응답을 모니터링
각 요청의 HTTP 메서드, 상태 코드, 크기, 로딩 시간 등을 확인 가능
Headers 탭: 요청/응답 헤더를 확인
Preview/Response 탭: 서버 응답 데이터를 보기 쉽게 표시
Timing 탭: 요청의 타임라인 분석이 가능
네트워크 조건 시뮬레이션(대역폭 제한, 오프라인 모드)이 가능
요청을 필터링하여 특정 유형(XHR, JS, CSS 등)만 볼 수 있음
5. Performance
웹사이트의 런타임 성능을 분석하는 도구
CPU 사용량, 메모리 사용량, 자바스크립트 실행 시간 등을 측정
페이지 로드, 스크롤, 애니메이션과 같은 사용자 상호작용 시 성능을 기록 가능
프레임 속도(FPS) 분석으로 애니메이션 성능을 확인
렌더링 병목 현상을 식별하고 해결하는 데 도움됨
메인 스레드 활동의 상세 분석이 가능
6. Memory
메모리 사용량 문제와 누수를 찾아내는 도구
Heap Snapshot: JavaScript 객체와 관련 메모리의 스냅샷을 찍어 분석
Allocation Timeline: 시간에 따른 메모리 할당을 추적
Allocation Sampling: 메모리 할당 패턴을 샘플링하여 분석
사용되지 않는 객체(detached DOM elements)를 식별하여 메모리 누수를 발견
객체 보유(retention) 경로를 통해 메모리가 해제되지 않는 이유를 파악 가능
7. Application
웹 애플리케이션의 저장소와 관련 리소스를 관리하는 도구
Local Storage, Session Storage, IndexedDB, Web SQL: 클라이언트 측 데이터 저장소를 검사하고 관리
Cookies: 웹사이트의 쿠키를 보고 수정
Cache Storage: 서비스 워커 캐시를 확인
Background Services: 백그라운드 동기화, 푸시 알림 등을 모니터링
Clear Storage: 모든 사이트 데이터를 한 번에 삭제
Manifest: 프로그레시브 웹 앱(PWA)의 매니페스트 파일을 검사할 수 있음
8. Security
웹사이트의 보안 상태를 확인하는 도구
HTTPS 사용 여부와 인증서 정보를 확인할 수 있음
혼합 콘텐츠(Mixed Content) 문제를 식별
보안 취약점에 대한 경고를 제공
HSTS, CSP(Content Security Policy) 등 보안 헤더 정보를 확인
9. Lighthouse
웹사이트의 품질을 종합적으로 분석하는 자동화된 도구
성능(Performance): 로딩 속도, 인터랙티브 시간 등을 측정
접근성(Accessibility): 장애인 사용자를 위한 접근성 준수 여부를 평가
최적화 관행(Best Practices): 웹 개발 모범 사례 준수 여부를 확인
SEO(검색 엔진 최적화): 검색 엔진에서 잘 인식될 수 있는지 평가
PWA(Progressive Web App): 프로그레시브 웹 앱 요구사항 충족 여부 확인
각 카테고리별 점수와 개선 제안 사항을 제공
