"test.js"라는 파일을 만들고 다음 코드를 삽입할 수 있도록 예시 파일부터 시작합니다.

let x = 5;
debugger;
console.log(x);

이제'inspect'키워드로 실행할 수 있습니다.

node inspect test.js

디버거는 그림과 같이 첫 번째 줄 코드에서 멈출 것입니다.작은 화살표 > 현재 위치를 표시합니다. 주변에 있는 코드를 볼 수 있습니다. 길을 잃은 것을 발견하면list (10) 를 입력하고enter 키를 누르면 위치 주변의 10줄을 표시합니다. 코드를 더 잘 볼 수 있도록 줄 수를 늘릴 수 있습니다.

여기에 다음을 입력할 수 있습니다.

c를 계속하면 디버거가 다음 "debugger"키워드에서 멈추게 됩니다.

n, 다음 줄 또는 다음 디버거 키워드로 이동합니다.
이제 n을 입력하여 변수 "x"의 설명을 이동합니다.

변수 값 확인

"exec"를 입력하여 변수 값을 검사할 수 있습니다. 이 예에서, 변수 x의 값을 알고 싶으므로, exec x를 입력하고enter를 누르십시오.

exec를 사용하여 원하는 코드를 실행하고 인쇄할 수 있습니다.예를 들어, x+5의 결과를 알고 싶을 수도 있습니다. exec x+5에 입력한 다음enter 키를 누르면 결과를 볼 수 있습니다.

디버거에 입력한 모든 내용은 코드를 변경하지 않기 때문에 원하는 대로 할 수 있습니다.이런 상황에서 결과는 당연히 10이다.exec를 사용하여 변수, 함수, 내용에 대한 값을 호출하여 모든 종류의 복잡한 코드를 실행할 수 있습니다.오류를 식별하고 코드의 가능한 해결 방안을 테스트하기 위해 더욱 구체적인 예시를 살펴보자.

코드 검사를 사용하여 코드를 작성합니다.

"test2.js"라는 파일을 만들고 다음 코드를 배치합니다

let users = [
  {
    id: 1,
    name: 'John'
  },
  {
    id: 2,
    name: 'Mary'
  }
];

const findUser = (users, userName) => {
  return users;
} 

지금 이 "findUser"함수를 쓰고 싶다고 가정해 보세요. 하지만 어떻게 해야 할지 모르고 가장 좋은 방법이 무엇인지도 몰라요.
노드 inspect를 사용하여 findUser 함수를 빠르게 테스트하고 작성할 수 있습니다.

node inspect test2.js

findUser 함수를 호출하는 위치에 도달할 때까지 "n"을 누르십시오.

여기서 서로 다른 표현식을 신속하게 테스트하여 필요한 내용을 실현하는 가장 좋은 방법을 찾을 수 있습니다."filter"를 사용할 생각이 있으나, 어떻게 사용하는지 모르겠습니다. exec를 사용하면users 변수를 신속하게 처리하고 해결 방안을 얻을 수 있습니다. 구체적으로는 다음과 같습니다.

exec users.filter(user => user.name == 'John')[0]

물론 너도 실시간으로 결과를 검사할 수 있다.

파일에서만 코드를 작성하는 것에 비해 어떤 것을 작성하는 피드백 순환을 크게 줄이고 결과를 볼 수 있어 코드를 작성하는 데 걸리는 시간을 줄일 수 있다는 장점이 있다.뿐만 아니라 더욱 중요한 것은 당신이 정확한 응용 프로그램인'상태'를 가지고 있기 때문에 응용 프로그램의 그 순간의 상태를 기억할 필요가 없다. 당신은 문제를 해결할 수 있다고 생각하는 코드를 작성하고 결과를 직접 볼 수 있다.

REPL(읽기, 평가, 인쇄 주기)

REPL은 우리가 위에서 한 일을 완성하는 데 더 간단한 방법입니다. exec를 계속 작성할 필요가 없습니다. REPL을 입력하고enter를 누르면 REPL을 입력하고 CTRL+c를 누르면 종료할 수 있습니다. 아래의 그림은 우리가 이전에 한 것과 같지만exec를 실행하는 것이 아니라 REPL을 사용하십시오.

관찰자 사용

디버그 코드의 마지막 유용한 부분은 관찰 프로그램을 사용하는 것이다. 관찰 프로그램은 표현식 값을 검사하는 더 편리한 방법일 뿐이고 아래의 코드는 간단한 함수일 뿐이어서 사용자의 균형을 바꿀 수 있다.test3이라는 파일을 만듭니다.js 다음 코드를 배치합니다.

let users = [
  {
    id: 1,
    name: 'John',
    balance: 100
  },
  {
    id: 2,
    name: 'Mary',
    balance: 200
  }
];

const changeBalance = (userId, amount) => {
  for(let user of users) {
    if(user.id === userId) {
      user.balance += amount;
      break;
    }
  }
};

changeBalance(1, 100);
changeBalance(2, 100);
changeBalance(2, -100);
changeBalance(1, -200);

우리가 이 파일을 실행하기 전에 한 것처럼

node inspect test3.js

코드는 예상한 대로 첫 줄에 멈출 것입니다. 현재 우리는 관찰자를 만들어서 사용자의 균형을 관찰할 수 있습니다. 만약에 우리가 존의 균형이 시간에 따라 어떻게 변화하는지 관찰하고 싶다고 가정할 수 있습니다.
너는 모든 표현식을 "watch"함수에 전달할 수 있다. 우리는 존이 그룹의 첫 번째 사용자라는 것을 알고 있기 때문에 만약 우리가 그의 균형이 어떻게 시간에 따라 변화하는지 관찰하고 싶다면, 우리는 작성할 수 있다

watch('users[0].balance')

리턴 버튼을 누르면 이런 화면을 볼 수 있다

현재 모든 명령을 사용하여 디버거의 줄을 변경할 때마다 디버거 맨 위에 지금까지 만들어진 모든 관찰 프로그램의 결과 값을 포함하는 새로운 항목이 나타납니다.

위 그림에서 "0:"줄은 사용자가 만든 관찰자,'users[0].balance=100'을 볼 수 있습니다. 따라서 존의 잔액은 100달러로 시작됩니다.디버거가 이동할 때마다 표현식은 현재 값으로 다시 계산됩니다. 만약'메리'의 균형이 시간에 따라 어떻게 변하는지 관찰하고 싶다면, 당신이 존을 위해 한 것처럼 관찰자를 만들 수 있습니다.

watch('users[1].balance')

만약 이 표현식을 다시 보고 싶지 않다면, unwatch('users[0].balance')로 존의 예에서 표현식에 대한 연결을 취소할 수 있습니다.
Chrome 개발 도구를 사용하여 디버깅을 할 수도 있지만, 설정 속도가 느리고 진정한 장점이 없기 때문에 Chrome 개발 도구를 사용하는 것을 추천하지 않습니다. 더 많은 것을 알고 싶으면 더 많은 내용을 읽을 수 있습니다 here.
좋은 하루 되세요.😄