코드 속 오류(버그)를 찾아 수정하는 과정을 디버깅(debugging)이라고 합니다. 디버깅은 개발 과정에서 누구나 거치는 자연스러운 단계이며, 이를 효율적으로 수행하면 개발 생산성과 코드 품질을 크게 높일 수 있습니다.
크롬 개발자 도구로 JavaScript 디버깅하기
구글 크롬에는 별도의 프로그램 설치 없이 바로 사용할 수 있는 강력한 디버깅 도구인 개발자 도구(DevTools)가 기본 탑재되어 있습니다. 아래 순서대로 따라 하면 누구나 쉽게 자바스크립트를 디버깅할 수 있습니다.
1단계: 구글 크롬 실행하기
먼저 구글 크롬 웹 브라우저를 실행합니다. 브라우저 창 우측 상단에 있는 세로 점 세 개(⋮) 메뉴 버튼을 클릭합니다.
2단계: 개발자 도구 열기
메뉴에서 도구 더보기를 선택한 뒤, 개발자 도구(Developer Tools)를 클릭합니다.
더 빠르게 열고 싶다면 단축키를 활용하는 것도 좋습니다.
- Windows/Linux:
F12또는Ctrl + Shift + I - macOS:
Cmd + Option + I
3단계: 콘솔(Console) 탭 선택하기
개발자 도구가 열리면 상단의 탭 목록에서 Console(콘솔)을 선택합니다.
콘솔에서는 다음과 같은 작업을 할 수 있습니다.
- 오류 및 경고 메시지 확인: 페이지 로드 시 발생한 자바스크립트 에러가 실시간으로 표시됩니다.
- 코드 직접 실행: 콘솔 입력창에 자바스크립트 코드를 입력해 즉시 결과를 확인하고 테스트할 수 있습니다.
- 변수 값 검사:
console.log()를 활용해 변수나 객체의 값을 출력하며 문제 원인을 추적할 수 있습니다.
추가 팁: Sources 패널 활용하기
더 정밀한 디버깅이 필요하다면 Sources(소스) 패널을 이용해 보세요. 코드 줄 번호를 클릭해 중단점(breakpoint)을 설정하면 해당 지점에서 실행이 멈추고, 그 시점의 변수 값과 호출 스택을 한눈에 확인할 수 있어 복잡한 오류도 체계적으로 분석할 수 있습니다.