JS로 알고리즘 문제풀이를 할 때마다 디버깅하기 매우 불편합니다.
console.log()
가 아닌 다른 방법으로 디버깅을 해봅시다.
배열의 요소를 제곱여 반환하는 함수
const arr = [1, 2, 3]; function squared(list) { const res = []; for (num of list) { res.push(num ** 2); console.log(res); } return res; } squared(arr);
배열의 요소를 제곱한 뒤 배열을 반환하는 함수입니다.
for of 문이 동작할 때 값의 흐름을 확인하려 console.log()
를 사용했습니다.
지금은 식별자가 많지 않아 일일이 확인할 수 있습니다. 하지만 식별자가 많을 때는 로그를 찍기도 번거롭고, 여러개를 찍어서 터미널에서 확인해 봐도 값의 흐름을 파악하기 쉽지 않습니다.
그래서 debugger
키워드를 사용해서 디버깅해보겠습니다.
debugger
키워드를 입력합니다. const arr = [1, 2, 3];
function squared(list) {
const res = [];
for (num of list) {
res.push(num ** 2);
debugger;
}
return res;
}
squared(arr);
// 실행하려는 파일이 있는 디렉토리로 이동해줍니다.
cd Desktop/Problem-Solving
// example.js는 실행하려는 파일입니다.
node inspect example.js
debugger
키워드를 입력하고 파일을 실행시키면 터미널에 아래와 같이 나옵니다.
이 상태에서 터미널에 c
를 입력합니다.
이제 원하는 시점(debugger
키워드가 있는 곳)에서 멈춘 것을 확인했습니다.
여기서 식별자를 확인하고 싶다면 repl
를 입력합니다.
그리고 원하는 식별자를 입력해봅니다.
변수 식별자 num, 배열 식별자 list, res를 다 확인할 수 있습니다.
다음 debugger
키워드가 있는곳을 찾으려면 일단 repl
에서 빠져나옵니다(컨트롤+c 입력하면 탈출).
빠져나온 뒤 다시 c
를 입력합니다.
for of 문이끝나지 않아서 다시 debugger
에 걸렸습니다.
지금 시점의 식별자 값을 확인해보겠습니다.
값이 바뀐것 확인했습니다.
debugger
입력node inspect example.js
c
를 눌러가며 원하는 시점을 찾기repl
을 입력하고 식별자 확인하기Ctrl + c
입력하기알고리즘 문제풀이 언어를 파이썬에서 JS로 변경하면서 디버깅에 대해 불편한점이 상당했습니다.
console.log()대신 각 시점에 따라 식별자의 값을 확인할 수 있는 debugger키워드를 사용해보는 것은 어떨까요?