디버깅은 버그를 수정할 때만 사용하는것이 아니라 예상하는 결과와 실제 동작의 결과와의 차이를 줄이기 위해서도 필요하다.
동작하는 소스코드에서 실시간으로 값을 확인하고 변경해서 값을 확인할 수 있는 디버깅 방법이다. 일반적으로 에디터에서 사용하는 "그" 디버깅 방식을 말한다.
코드예제
function sayHello() {
console.log('hello!');
}
function calculate(x, y) {
console.log('calculating...');
const res = x + y;
console.log('res', res);
sayHello();
return res;
}
calculate(1, 2);
const stop = 4;
console.log('... looping ...');
for (let i = 0; i < 10; i++) {
console.log('count', i);
if (i === stop) break;
}
Node.js
로 선택한다.continue: 다음 브레이크 포인트로 진행
step over: 브레이크 포인트가 아닌 코드 한줄 한줄씩 진행, 다른 함수 안으로까지는 안들어간다.
step into: 현재 코드줄이 만약 함수와 같이 내부로 진입할 수 있다면 내부로 진입 아니면 다음 줄로 진행
step into: 현재 코드줄이 만약 함수와 같이 내부라면 외부로 빠져나옴 아니면 다음 줄로 진행
restart: 디버깅 재시작
stop: 디버깅 중지
반복문에 브레이크 포인트를 걸게된다면 반복문이 끝날 때까지 디버깅 단계를 확인해야하므로 매우 번거롭다.
이 때 아래 사진과 같이 브레이크 포인트에 조건을 걸어서 내가 원할 때만 브레이크 포인트에 걸리도록 할 수 있다.
우선 원하는 행에 브레이크포인트를 잡고 브레이크 포인트에 우클릭을 한 뒤조건부 편집
를 클릭한다.
이후 내가 원하는 조건을 작성하고 enter
를 하면 내가 원하는 조건일 때만 브레이크 포인트에 걸리게 된다.
만약 디버깅을 하다가 코드의 일부 내용을 수정하면 디버깅을 새로 시작해야하는 불편한 점이 있다.
코드를 수정했을 때 곧바로 디버깅을 자동으로 재시작 되도록 설정을 해보자.
우선 디버깅 탭을 클릭하고 launch.json
파일을 생성 버튼을 클릭하고 환경선택창이 나오면 Node.js
로 선택하자
이후 해다 프로젝트에 launch.json
이 초기화 되어 생성되고 아래와 같이 기존에 내용에 2줄의 설정을 추가하자
{
// IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
// 기존 특성에 대한 설명을 보려면 가리킵니다.
// 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/app.js",
"runtimeExecutable": "nodemon", // 추가, 노드몬으로 실행가능하도록 설정
"restart": true // 추가, 재시작 옵션을 true로 설정
}
]
}
이제 다시 디버깅 탭에 가면 아예 디번깅에 시작이 되어있을거고 코드를 수정할 때마다 디버깅 탭에서 자동으로 재시작이 되어있을 것이다.