자바스크립트 디버깅이란?
코드 속의 버그(bug)를 찾아내고 수정하는 과정을 디버깅(debugging)이라고 하며, 이는 개발 과정에서 빼놓을 수 없는 필수 단계입니다. 특히 자바스크립트는 실행 중에 오류가 발생해도 화면에 별다른 경고가 나타나지 않는 경우가 많아, 전용 도구를 활용한 체계적인 디버깅이 중요합니다.
파이어폭스(Firefox)를 비롯한 대부분의 브라우저는 오류 메시지를 JavaScript 콘솔(Console) 또는 오류 콘솔(Error Console)이라 불리는 전용 창에 출력합니다. 다만 이러한 브라우저들은 오류 발생 시 시각적으로 알려주지 않기 때문에, 스크립트가 실행되는 동안 콘솔을 미리 열어두고 오류 메시지를 직접 확인해야 합니다.
Firefox 웹 콘솔(Web Console) 열기
파이어폭스에서 자바스크립트를 디버깅하려면 아래 절차를 순서대로 따라 하세요.
1단계: 메뉴에서 '웹 개발자' 선택
브라우저 우측 상단의 메뉴(☰) 버튼을 클릭한 뒤, 웹 개발자(Web Developer) 항목을 선택합니다.
2단계: '웹 콘솔' 실행
웹 개발자 하위 메뉴에서 웹 콘솔(Web Console)을 클릭합니다.
3단계: 웹 콘솔 창 확인
아래와 같이 웹 콘솔 창이 열리면, 자바스크립트 코드 실행 중 발생하는 오류 메시지와 로그를 실시간으로 확인할 수 있습니다.
더 빠른 방법: 단축키 활용
메뉴를 거치지 않고 Ctrl + Shift + K(macOS는 Cmd + Option + K) 단축키를 누르면 웹 콘솔을 즉시 열 수 있습니다. 또한 개발자 도구(F12)를 연 후 상단 탭에서 '콘솔'을 선택해도 동일한 기능을 사용할 수 있습니다.
웹 콘솔에는 오류(Error)뿐 아니라 경고(Warning), 일반 로그(Log)도 함께 표시되므로, 오류 메시지 옆에 표시된 파일명과 줄 번호를 참고하면 문제가 발생한 코드 위치를 빠르게 파악할 수 있습니다.