[Developer Tools] 크롬 개발자 도구(DevTools)로 디버깅하기
개발을 하다 보면 버그를 찾고 고치는 과정인 디버깅 이 필수적이다.
이때 단순히 console.log만 찍어보는 것보다 웹 개발에서는 크롬 개발자 도구를 사용하면 훨씬 효율적으로 문제를 찾고 분석할 수 있다.
🐛 디버깅이란?
디버깅이란 소프트웨어에서 버그를 찾아내고 수정하는 과정이다.
단순히 오류를 고치는 것을 넘어서 코드의 동작 방식을 이해하고 예상치 못한 동작의 원인을 파악하는 과정이다.
🔴 브레이크포인트(중단점)
브레이크포인트는 코드 실행을 특정 지점에서 멈추게 하는 기능이다.
코드가 실행되다가 브레이크포인트에 도달하면 일시 정지되어, 그 순간의 변수 값과 실행 상태를 확인할 수 있다.
이를 통해 코드가 예상대로 동작하는지 검증하고 문제가 발생하는 정확한 지점을 찾을 수 있다.
브레이크포인트는 언제든 추가하거나 제거할 수 있어서 필요에 따라 여러 지점에 설정하여 코드 흐름을 단계별로 추적할 수 있다.
🛠️ 크롬 개발자 도구에서 디버깅 방법
개발자 도구는 아래 방법으로 열 수 있다.
- F12 키
- Ctrl+Shift+I (Windows/Linux)
- Cmd+Option+I (Mac)
- 우클릭 → 검사
📂 Sources 탭 열기
상단 탭 중 Sources 를 클릭한다.
여기서 현재 열려 있는 웹 페이지의 자바스크립트 파일을 확인할 수 있다.
⏸️ 브레이크포인트 설정
좌측 파일 트리에서 디버깅하고 싶은 파일을 선택한다.
코드 라인 번호를 클릭하면 브레이크포인트가 설정되고 파란색으로 표시된다.
브레이크포인트가 설정되면, 해당 코드에 도달했을 때 실행이 멈춘다.
조건부 브레이크포인트도 설정할 수 있는데, 라인 번호에서 우클릭 → Add conditional breakpoint를 선택한 후 조건식을 입력하면 된다.
예를 들어 i === 5라는 조건을 설정하면 반복문에서 i 값이 5일 때만 실행이 멈춘다.
🔍 코드 흐름 확인
브레이크포인트를 설정한 후 웹 페이지에서 버튼 클릭 등 실제 동작을 트리거한다.
코드가 브레이크포인트에서 멈추면 Scope 패널을 확인한다.
-
Local: 현재 함수 안 변수 값 -
Global: 전역 변수 값
버튼을 클릭하자, Scope 패널에 현재 변수들이 위와 같이 표시되었다.
이처럼 브레이크포인트에서 코드가 멈춘 상태에서 변수 값을 확인하면, 실행 흐름과 값 변화를 쉽게 추적할 수 있다.
이 방법은 console.log를 사용하는 것과 달리 코드 실행을 일시 정지하고, 변수 상태를 한눈에 확인할 수 있기 때문에 효율적인 디버깅 방법이다.
🎮 코드 실행 제어
브레이크포인트에서 코드가 멈춘 후, 상단의 실행 제어 버튼들로 코드 흐름을 제어할 수 있다.
- Resume (F8): 다음 브레이크포인트까지 실행 계속
- Step Over (F10): 현재 라인 실행 후 다음 라인으로 이동
- Step Into (F11): 함수가 있다면 함수 내부로 들어가기
- Step Out (Shift+F11): 현재 함수를 빠져나와 호출한 곳으로 돌아가기
이 버튼들을 활용하면 코드를 한 줄씩 실행하면서 변수 값의 변화를 실시간으로 확인할 수 있다.
이제 크롬 개발자 도구를 활용해 직접 디버깅을 시도해 보자! ✨
Leave a comment