디버깅, console.log()로 하시나요?

뿡빵이·2021년 8월 26일
1

웹 개발

목록 보기
1/3
post-thumbnail

0. console.log()는 불편해

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 키워드를 사용해서 디버깅해보겠습니다.

1. 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);

2. debugger를 활용해 디버깅하기

  • 터미널을 열어 다음과 같이 입력합니다.
// 실행하려는 파일이 있는 디렉토리로 이동해줍니다.
cd Desktop/Problem-Solving 
// example.js는 실행하려는 파일입니다.
node inspect example.js

debugger키워드를 입력하고 파일을 실행시키면 터미널에 아래와 같이 나옵니다.

이 상태에서 터미널에 c를 입력합니다.

3. 식별자 값 확인하기

이제 원하는 시점(debugger키워드가 있는 곳)에서 멈춘 것을 확인했습니다.

여기서 식별자를 확인하고 싶다면 repl를 입력합니다.

그리고 원하는 식별자를 입력해봅니다.


변수 식별자 num, 배열 식별자 list, res를 다 확인할 수 있습니다.

다음 debugger키워드가 있는곳을 찾으려면 일단 repl에서 빠져나옵니다(컨트롤+c 입력하면 탈출).

빠져나온 뒤 다시 c를 입력합니다.

for of 문이끝나지 않아서 다시 debugger에 걸렸습니다.

지금 시점의 식별자 값을 확인해보겠습니다.

값이 바뀐것 확인했습니다.

요약

  1. 원하는곳에 debugger입력
  2. 터미널에서 실행 node inspect example.js
  3. c를 눌러가며 원하는 시점을 찾기
  4. 원하는 시점에 repl을 입력하고 식별자 확인하기
  5. 종료하고싶으면 Ctrl + c 입력하기
  6. 알고리즘 AC받기

알고리즘 문제풀이 언어를 파이썬에서 JS로 변경하면서 디버깅에 대해 불편한점이 상당했습니다.
console.log()대신 각 시점에 따라 식별자의 값을 확인할 수 있는 debugger키워드를 사용해보는 것은 어떨까요?

profile
글을 잘쓰는 개발자가 되고싶습니다

0개의 댓글