Javascript(VS Code)에서 디버깅을 위해 console.log()를 사용하지 마십시오.

안녕하세요, 데브스입니다!

처음에는 console.log()를 사용하는 것이 정상입니다. 변수 또는 메서드의 반환 값을 디버깅하는 가장 잘 알려진 방법이기 때문입니다.

그러나 다른 옵션이나 더 나은 방법이 있습니까? 확실히 맞아요!

디버깅이란 무엇입니까?

Debbug는 코드, 변수 값, 메서드 반환의 모든 부분에서 무슨 일이 일어나고 있는지 찾는 Debbuger(us)의 작업이며 오류가 있을 때 더 쉽게 찾을 수 있습니다.
Javascript에는 사용할 디버거 예약어가 있으며 경우에 따라 VSCode와 같은 IDE에 도구를 사용하는 경우도 있습니다.

Javascript에서 console.log() 대신 디버거를 사용하는 방법은 무엇입니까?

디버거라는 단어는 디버깅 프로세스를 시작하기 위한 중단점을 만듭니다.

NodeJS 프로젝트를 생성해 보겠습니다.

mkdir debugger-example && cd debugger-example
npm init -y
touch index.js

아래 코드를 작성할 수 있습니다.

//index.js

var products = [
    { name: 'Computer', type: 'Eletronic', year: 2021 },
    { name: 'Radio', type: 'Machine', year: 1990 },
    { name: 'Cloud', type: 'Infrastructure', year: undefined }
];

debugger
console.table(products)
console.debug(products)

터미널에서 index.js를 테스트할 수 있습니다.

node index.js

디버거라는 단어는 실행을 중단하고 컨텍스트와 관련된 값을 분석할 수 있습니다.

먼저 console.table(products)의 출력은 다음과 같습니다. 보기에 좋지 않습니까?

┌─────────┬────────────┬──────────────────┬───────────┐
│ (index) │    name    │       type       │   year    │
├─────────┼────────────┼──────────────────┼───────────┤
│    0    │ 'Computer' │   'Eletronic'    │   2021    │
│    1    │  'Radio'   │    'Machine'     │   1990    │
│    2    │  'Cloud'   │ 'Infrastructure' │ undefined │
└─────────┴────────────┴──────────────────┴───────────┘

console.debug(products)의 출력은 다음과 같습니다.

[
  { name: 'Computer', type: 'Eletronic', year: 2021 },
  { name: 'Radio', type: 'Machine', year: 1990 },
  { name: 'Cloud', type: 'Infrastructure', year: undefined }
]

이 두 명령(테이블 및 디버그)은 경우에 따라 도움이 될 수 있지만 일부 IDE에서 디버깅 도구를 사용하는 것이 더 좋으며 이 경우 VS CODE를 사용합니다.

따라서 데이터가 데이터베이스에서 얻어지고 하나의 튜플이 정의되지 않은 상태로 생성되었다고 상상해 보십시오. 그래서 우리는 그것을 해결할 수 있는 방법을 알아야 합니다.

VSCODE: 실행 및 디버그 도구를 살펴보십시오. 왼쪽에 하나의 버그가 있는 재생 버튼을 클릭하여 액세스할 수 있습니다.



실행하면node index.js 디버거가 예약된 작업이 있는 7 행에서 디버깅이 시작된다는 표시를 받습니다. 우리가 볼 수 있듯이 아래 화면의 왼쪽에는 컨텍스트와 관련된 모든 제품과 모든 것이 표시됩니다.



이와 같이 우리는 코드에서 무슨 일이 일어나고 있는지 깊이 분석하고 더 나은 방법으로 버그를 해결할 수 있습니다.

Javascript에서 디버깅을 위해 console.log()를 사용하지 마십시오. 코드를 디버그하십시오!

콘택트 렌즈
이메일: [email protected]
인스 타 그램:
링크드인:
트위터: