개발자도구 사용방법

---

created: 2025-12-29 18:19
updated: 2025-12-29 18:19
author: Jeon MinJi

항목

• Elements : html/CSS 상태 확인
• Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
• Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
• Network : 브라우저에서 발생하는 통신 상태
• Performance(예전 Timeline패널) : 성능 측정
• Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
• Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
• Audits : 페이지를 분석하고 최적화를 위한 팁 나열
• Security : Mixed content 이슈, 인증서 문제 등을 디버깅

element

요소들을 드래그엔드랍으로 위치를 바꿀 수 있다.

· event listeners

어떤 스크립트에서 해당이벤트가 발생했는지 알 수 있다.

· dom break on

Break on을 설정해두면 자바스크립트 코드가 해당 dom 요소 변화를 줄 때 break하여 해당 소스 코드로 이동 - subtree modifications : 해당 노드, 하위 트리에 변화(추가,삭제 등)가 생기면 break - attribute modifications : 해당 노드의 속성의 변경이 생기면 break - node removal : 해당 노드가 제거되면 break

source

· snippets

console에서 여러 줄 코딩하거나 스크립트를 저장하고 필요할때마다 사용하고 싶을때 snippets를 이용하면 편하다

디버깅

디버깅이 필요없는 파일은 해당파일 코드줄에 우클릭하면 해당 script를 무시할 수 있다.
setting에서 이라한 리스트를 관리할 수 있다.

· 디버그 툴바

좌에서 우 순서대로

• Pause ­ 다음에 실행 될 자바스크립트 코드에 Breakpoint를 잡고 멈춤
• StepOverNextFunctionCall­ : Breakpoint에서 다음 함수 실행으로 넘어가기
• StepIntoNextFunctionCall­ : 다음 함수 내부의 첫 번째 라인으로 들어가기
• StepOutCurrentFunction : 현재 함수의 실행 종료 시점으로 넘어가기 Step­ 다음 실행 순서로 넘어가기
• Deactivatebreakpoints : ­ Breakpoint 비활성화
• Pauseonexceptions ­: 예외가 발생하면 멈추기

· breakpoint

source에서도 js파일에 직접 breakpoint를 줄 수 있지만 submit할때나 click이발생했을 때와 같은 이벤트로 breakpoint를 설정 가능하다.

Network

- 빨간점 :기록중 - preserve log : 로그 보존 - disable cache :말그대로 캐시 비활성화 - no throttling : 네트워크 환경 조절가능

Filter과 하단바에 버튼들로 유형별로 볼 수 있음

원하는 XHR요청을 새로고침말고 저렇게 replay xhr을 누르면 그 요청만 다시 요청할 수 있다

application

저장소들에 머가 저장되었는지 볼 수 있다.

Coverage

페이지 렌더링에 사용중인 파일을 알려줌. 파란색 여기서 쓰는것 빨간색 쓰지 않는 것

console 창

· live expression

등록된 값을 계속 확인가능

console.table 객체나 배열을 테이블로 볼 수 있다.