반응형
- 좀 더 복잡한 코드를 작성하기 전에, 디버깅이란 것에 대해 이야기해봅시다.
- 디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다.
- 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다.
- 이 글에선 Chrome 브라우저에서 제공하는 디버깅 툴을 사용하도록 하겠습니다.
- 기능이 다양하고, Chrome에 익숙해지면 다른 브라우저에서 지원하는 디버깅 툴은 쉽게 익힐 수 있기 때문입니다.
‘Source’패널
- F12(MacOS: Cmd+Opt+I)를 눌러 개발자 도구를 엽니다.
- Sources 패널을 처음 열었다면 아래와 같은 화면이 보일 겁니다.
- 토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열됩니다.
- 파일 목록에서 hello.js를 클릭해 아래와 같이 화면을 바꿔봅시다.
Sources 패널은 크게 세 개의 영역으로 구성됩니다.
- 파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여줍니다. Chrome 익스텐션이 여기 나타날 때도 있습니다.
- 코드 에디터 영역 – 리소스 영역에서 선택한 파일의 소스 코드를 보여줍니다. 여기서 소스 코드를 편집할 수도 있습니다.
- 자바스크립트 디버깅 영역 – 디버깅에 관련된 기능을 제공합니다. 곧 자세히 살펴보겠습니다.
중단점
- 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동할 수 있습니다.
- 체크 박스 선택을 해제해 해당 중단점을 비활성화 할 수 있습니다.
- 마우스 오른쪽 버튼을 클릭했을 때 나오는 ‘Remove breakpoint’ 옵션을 통해 중단점을 삭제할 수도 있습니다.
- 이 외에도 다양한 기능이 있습니다.
debugger 명령어
아래 예시처럼 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 봅니다.
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- 여기서 실행이 멈춥니다.
say(phrase);
}
debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 하지 않아도 됩니다. 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리하죠.
멈추면 보이는 것들
- 예시 페이지를 열면 함수 hello()가 자동으로 호출됩니다.
- 중단점이 제대로 설정되어있는지 확인하고, 새로 고침 단축키 F5(Windows, Linux 사용자)나 Cmd+R키(MacOS 사용자)를 눌러 중단점을 작동시켜봅시다.
- 아래 그림과 같이 네 번째 줄에서 실행이 중단되는 것을 확인할 수 있습니다.
- Watch – 표현식을 평가하고 결과를 보여줍니다.
- Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다.
- Call Stack – 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다.콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 휙 움직이고, 변수 역시 재평가됩니다. 'anonymous’를 클릭해 직접 확인해 봅시다.
- 실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄습니다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치합니다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력됩니다.
- Scope – 현재 정의된 모든 변수를 출력합니다.Global은 함수 바깥에 정의된 전역 변수를 보여줍니다.
- Local은 함수의 지역변수를 보여줍니다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있습니다.
요약
스크립트 실행이 중단되는 경우는 다음과 같습니다.
- 중단점을 만났을 때
- debugger문 만났을 때
- 에러가 발생했을 때(개발자 도구가 열려있고 버튼이 '활성화’되어있는 경우)
스크립트 실행이 중지되면 중단 시점을 기준으로 변수에 어떤 값이 들어가 있는지 확인할 수 있습니다. 또한 단계별로 코드를 실행해 가며, 어디서 문제가 발생했는지 추적할 수도 있습니다. 이런 식으로 디버깅이 진행됩니다.
반응형