여러 도구를 사용하여 Node.js 코드를 디버그하는 방법

Node.js는 Google의 Chrome 브라우저에서 사용되는 것과 동일한 V8 엔진을 기반으로 하는 JavaScript 런타임입니다. 플랫폼 간 서버 측 및 터미널 응용 프로그램을 구축하는 데 자주 사용됩니다. Node.js는 설치가 쉽고 실용적이며 빠르며 클라이언트 측 웹 개발자가 다른 곳에서 자신의 기술을 활용할 수 있기 때문에 지난 10년 동안 점점 인기를 얻었습니다.

그러나 소프트웨어 개발은 ​​여전히 ​​복잡한 작업이며 Node.js 코드는 어느 시점에서 실패합니다. 이 자습서는 응용 프로그램을 디버그하고 문제의 원인을 찾는 데 도움이 되는 다양한 도구를 보여줍니다.

바로 뛰어들자.

디버깅 개요

"디버깅"은 소프트웨어 결함을 수정하는 다양한 수단에 주어진 이름입니다. 버그 수정은 종종 간단합니다. 버그의 원인을 찾는 것은 훨씬 더 복잡하고 머리를 긁는 데 많은 시간이 소요될 수 있습니다.

다음 섹션에서는 발생할 수 있는 세 가지 일반적인 오류 유형에 대해 설명합니다.

구문 오류

코드가 언어 규칙을 따르지 않습니다. 예를 들어, 닫는 괄호를 생략하거나 console.lag(x) 와 같은 문장의 철자를 틀리는 경우입니다.

좋은 코드 편집기는 다음을 통해 일반적인 문제를 찾는 데 도움이 될 수 있습니다.

• 색상 코딩 유효 또는 유효하지 않은 진술
• 유형 검사 변수
• 자동 완성 기능 및 변수 이름
• 일치하는 대괄호 강조 표시
• 코드 블록 자동 들여쓰기
• 연결할 수 없는 코드 감지
• 지저분한 함수 리팩토링

VS Code 및 Atom과 같은 무료 편집기는 Node.js, JavaScript 및 TypeScript(JavaScript로 변환됨)를 훌륭하게 지원합니다. 기본 구문 문제는 일반적으로 코드를 저장하고 테스트하기 전에 발견할 수 있습니다.

ESLint와 같은 코드 린터는 구문 오류, 잘못된 들여쓰기 및 선언되지 않은 변수도 보고합니다. ESLint는 다음을 사용하여 전역적으로 설치할 수 있는 Node.js 도구입니다.

 npm i eslint -g

다음을 사용하여 명령줄에서 JavaScript 파일을 확인할 수 있습니다.

 eslint mycode.js

...하지만 VS Code용 ESLint 또는 Atom용 linter-eslint와 같은 편집기 플러그인을 사용하는 것이 더 쉽습니다. 입력할 때 자동으로 코드의 유효성을 검사합니다.

논리 오류

코드가 실행되지만 예상대로 작동하지 않습니다. 예를 들어 사용자가 요청할 때 로그아웃되지 않습니다. 보고서에 잘못된 수치가 표시됩니다. 데이터가 데이터베이스에 완전히 저장되지 않았습니다. 등.

논리 오류는 다음으로 인해 발생할 수 있습니다.

• 잘못된 변수 사용
• 잘못된 조건, 예를 들어 if (a > 5) if (a < 5)
• 연산자 우선 순위를 고려하지 않는 계산(예: 1+2*3 )은 9가 아닌 7이 됩니다.

피할 수 없는 일입니다. Node.js 코드는 어느 시점에서 실패할 것입니다. 애플리케이션을 디버그하는 데 사용할 수 있는 도구를 확인하고 바로 여기에서 문제의 원인을 찾으십시오 .

런타임(또는 실행) 오류

오류는 응용 프로그램이 실행될 때만 분명해지며 종종 충돌로 이어집니다. 런타임 오류는 다음으로 인해 발생할 수 있습니다.

• 0으로 설정된 변수로 나누기
• 존재하지 않는 배열 항목에 대한 액세스 시도
• 읽기 전용 파일에 쓰려고 합니다.

논리 및 런타임 오류는 발견하기가 더 어렵지만 다음 개발 기술이 도움이 될 수 있습니다.

1. 테스트 주도 개발 사용: TTD는 함수가 개발되기 전에 테스트를 작성하도록 권장합니다. 예를 들어 Z가 매개변수로 전달되면 functionY에서 X가 반환됩니다. 이러한 테스트는 코드가 예상대로 계속 작동하는지 확인하기 위해 초기 개발 및 후속 업데이트 중에 실행됩니다.
2. 문제 추적 시스템 사용: "귀하의 소프트웨어가 작동하지 않습니다" 라고 주장하는 이메일보다 더 나쁜 것은 없습니다! 문제 추적 시스템을 사용하면 특정 문제를 기록하고, 재생산 단계를 문서화하고, 우선 순위를 결정하고, 개발자를 할당하고, 수정 진행 상황을 추적할 수 있습니다.
3. 소스 제어 사용: Git과 같은 소스 제어 시스템은 코드를 백업하고, 개정을 관리하고, 버그가 도입된 위치를 식별하는 데 도움이 됩니다. Github 및 Bitbucket을 포함한 온라인 리포지토리는 소규모 또는 오픈 소스 프로젝트를 위한 여유 공간과 도구를 제공합니다.

여전히 Node.js 버그가 발생하지만 다음 섹션에서는 파악하기 어려운 오류를 찾는 방법을 설명합니다.

적절한 Node.js 환경 변수 설정

호스트 운영 체제에서 설정한 환경 변수는 Node.js 애플리케이션 및 모듈 설정을 제어할 수 있습니다. 가장 일반적인 것은 NODE_ENV 이며, 이는 일반적으로 라이브 서버에서 실행할 때 디버깅 또는 프로덕션 시 개발로 설정됩니다. 다음 명령을 사용하여 macOS 또는 Linux에서 환경 변수를 설정합니다.

 NODE_ENV=development

또는 (클래식) Windows 명령 프롬프트에서:

 set NODE_ENV=development

또는 Windows Powershell:

 $env:NODE_ENV="development"

널리 사용되는 Express.js 프레임워크에서 NODE_ENV를 개발로 설정하면 템플릿 파일 캐싱이 비활성화되고 자세한 오류 메시지가 출력되므로 디버깅 시 도움이 될 수 있습니다. 다른 모듈은 유사한 기능을 제공할 수 있으며 애플리케이션에 NODE_ENV 조건을 추가할 수 있습니다.

 // running in development mode? const devMode = (process.env.NODE_ENV !== 'production'); if (devMode) { console.log('application is running in development mode'); }

Node의 util.debuglog 메서드를 사용하여 조건부로 오류 메시지를 출력할 수도 있습니다.

 import { debuglog } from 'util'; const myappDebug = debuglog('myapp'); myappDebug('log something');

이 응용 프로그램은 NODE_DEBUG가 myapp 또는 * 또는 my*와 같은 와일드카드로 설정된 경우에만 로그 메시지를 출력합니다.

Node.js 명령줄 옵션 사용

노드 스크립트는 일반적으로 노드 다음에 항목 스크립트 이름을 사용하여 시작됩니다.

 node app.js

명령줄 옵션을 설정하여 다양한 런타임 측면을 제어할 수도 있습니다. 디버깅에 유용한 플래그는 다음과 같습니다.

• --check
  구문 검사를 실행하지 않고 스크립트
• --trace-warnings
  JavaScript Promise가 확인되지 않거나 거부될 때 스택 추적을 출력합니다.
• --enable-source-maps
  TypeScript와 같은 변환기를 사용할 때 소스 맵 표시
• --throw-deprecation
  더 이상 사용되지 않는 Node.js 기능이 사용될 때 경고
• --redirect-warnings=file
  stderr이 아닌 파일에 경고 출력
• --trace-exit
process.exit() 가 호출될 때 스택 추적을 출력합니다.

콘솔에 메시지 출력

콘솔 메시지 출력은 Node.js 애플리케이션을 디버그하는 가장 간단한 방법 중 하나입니다.

 console.log(`someVariable: ${ someVariable }`);

다른 많은 콘솔 방법이 있다는 것을 아는 개발자는 거의 없습니다.

console.log() 는 쉼표로 구분된 값 목록도 허용합니다.

 let x = 123; console.log('x:', x); // x: 123

… ES6 구조 해제는 더 적은 노력으로 유사한 출력을 제공하지만:

 console.log({ x }); // { x: 123 }

console.dir() 명령은 util.inspect()와 같은 방식으로 객체 속성을 예쁘게 인쇄합니다.

 console.dir(myObject, { depth: null, color: true });

콘솔 논란

일부 개발자는 다음과 같은 이유로 console.log() 를 사용 해서는 안 된다고 주장합니다.

• 코드를 변경하는 중이며 무언가를 변경하거나 제거하는 것을 잊어버릴 수 있습니다.
• 더 나은 디버깅 옵션이 있으면 필요하지 않습니다.

console.log() 를 사용하지 않는다고 주장하는 사람을 믿지 마십시오! 로깅은 빠르고 더럽지만 모든 사람이 언젠가는 사용합니다. 원하는 도구나 기술을 사용하십시오. 버그를 찾는 방법보다 버그를 수정하는 것이 더 중요합니다.

타사 로깅 시스템 사용

타사 로깅 시스템은 메시징 수준, 상세 정보, 정렬, 파일 출력, 프로파일링, 보고 등과 같은 보다 정교한 기능을 제공합니다. 인기 있는 솔루션으로는 캐빈, 로그레벨, 모건, 피노, 시그널, 스토리보드, 트레이서, 윈스턴이 있습니다.

V8 인스펙터 사용

V8 JavaScript 엔진은 Node.js에서 사용할 수 있는 디버깅 클라이언트를 제공합니다. 예를 들어 노드 검사를 사용하여 애플리케이션 시작

 node inspect app.js

디버거는 첫 번째 줄에서 일시 중지하고 debug> 프롬프트를 표시합니다.

 $ node inspect .\mycode.js < Debugger listening on ws://127.0.0.1:9229/143e23fb < For help, see: https://nodejs.org/en/docs/inspector < ok < Debugger attached. < Break on start in mycode.js:1 > 1 const count = 10; 2 3 for (i = 0; i < counter; i++) { debug>

명령 목록을 보려면 help를 입력하십시오. 다음을 입력하여 애플리케이션을 단계별로 진행할 수 있습니다.

• cont 또는 c : 계속 실행
• next 또는 n : 다음 명령 실행
• step 또는 s : 호출되는 함수로 한 단계씩 이동
• out 또는 o : 함수에서 나와 호출 문으로 돌아갑니다.
• pause : 실행 중인 코드를 일시 중지
• watch('myvar') : 변수 감시
• setBreakPoint() 또는 sb() : 중단점 설정
• restart : 스크립트를 다시 시작
• .exit 또는 Ctrl | Cmd + D : 디버거 종료

분명히 이 디버깅 옵션은 시간이 많이 걸리고 다루기 어렵습니다. 원격 서버에서 코드를 실행 중이고 다른 곳에서 연결할 수 없거나 추가 소프트웨어를 설치할 수 없는 경우와 같이 다른 옵션이 없는 경우에만 사용하십시오.

Chrome 브라우저를 사용하여 Node.js 코드 디버그

위에서 사용된 Node.js 검사 옵션은 localhost 포트 9229에서 수신 대기하는 웹 소켓 서버를 시작합니다. 또한 텍스트 기반 디버깅 클라이언트를 시작하지만 Google Chrome 및 Chrome 기반에 내장된 것과 같은 그래픽 클라이언트를 사용할 수 있습니다. Chromium, Edge, Opera, Vivaldi 및 Brave와 같은 브라우저.

일반적인 웹 애플리케이션을 디버그하려면 –inspect 옵션으로 시작하여 V8 디버거의 웹 소켓 서버를 활성화합니다.

 node --inspect index.js

메모:

• index.js는 애플리케이션의 입력 스크립트로 간주됩니다.
• --inspect 를 이중 대시와 함께 사용하여 텍스트 기반 디버거 클라이언트를 시작하지 않도록 하십시오.
• 파일이 변경될 때 응용 프로그램을 자동으로 다시 시작하려면 node 대신 nodemon을 사용할 수 있습니다.

기본적으로 디버거는 로컬 시스템에서 들어오는 연결만 수락합니다. 다른 장치, 가상 머신 또는 Docker 컨테이너에서 애플리케이션을 실행하는 경우 다음을 사용합니다.

 node --inspect=0.0.0.0:9229 index.js

또한 --inspect 대신 --inspect --inspect-brk 를 사용하여 첫 번째 줄에서 처리를 중지(중단점 설정)할 수 있으므로 처음부터 코드를 단계별로 실행할 수 있습니다.

Chrome 기반 브라우저를 열고 주소 표시줄에 chrome://inspect 를 입력하여 로컬 및 네트워크 장치를 봅니다.

Node.js 애플리케이션이 원격 대상 으로 표시되지 않으면 다음 중 하나를 수행합니다.

• 노드용 전용 DevTools 열기를 클릭하고 주소와 포트를 선택하거나
• 네트워크 대상 검색 을 선택하고 구성 을 클릭한 다음 실행 중인 장치의 IP 주소와 포트를 추가합니다.

대상의 검사 링크를 클릭하여 DevTools 디버거 클라이언트를 시작합니다. 이것은 클라이언트 측 코드 디버깅을 위해 DevTools를 사용한 모든 사람에게 익숙할 것입니다.

소스 패널로 전환합니다. Cmd | Ctrl + P를 누르고 파일 이름(예: index.js)을 입력합니다.

그러나 프로젝트 폴더를 작업 공간에 추가하는 것이 더 쉽습니다. 이를 통해 DevTools에서 직접 파일을 로드, 편집 및 저장할 수 있습니다(좋은 생각인지 여부는 다른 문제입니다!)

1. + 작업 공간에 폴더 추가 클릭
2. Node.js 프로젝트의 위치를 ​​선택하십시오.
3. 동의 를 눌러 파일 변경 허용

이제 왼쪽 디렉토리 트리에서 파일을 로드할 수 있습니다.

파란색 마커로 표시된 중단점을 설정하려면 줄 번호를 클릭합니다.

디버깅은 중단점 을 기반으로 합니다. 이들은 디버거가 프로그램 실행을 일시 중지하고 프로그램의 현재 상태(변수, 호출 스택 등)를 표시해야 하는 위치를 지정합니다.

사용자 인터페이스에서 중단점을 원하는 수만큼 정의할 수 있습니다. 또 다른 옵션은 디버거를 배치하는 것입니다. 디버거가 연결되면 중지됩니다.

웹 애플리케이션을 로드하고 사용하여 중단점이 설정된 명령문에 도달합니다. 여기 예제에서 http://localhost:3000/은 모든 브라우저에서 열리고 DevTools는 44행에서 실행을 중지합니다.

오른쪽 패널에는 다음이 표시됩니다.

• 일련의 작업 아이콘(아래 참조).
• 조사식 창에서 + 아이콘을 클릭하고 이름을 입력하여 변수를 모니터링할 수 있습니다.
• 중단점 창에는 모든 중단점 목록이 표시되며 이를 활성화 또는 비활성화할 수 있습니다.
• 범위 창에는 모든 로컬, 모듈 및 전역 변수의 상태가 표시됩니다. 이 창을 가장 자주 검사하게 됩니다.
• 호출 스택 창에는 이 지점에 도달하기 위해 호출된 함수의 계층이 표시됩니다.

중단점에서 일시 중지됨 위에 작업 아이콘 행이 표시됩니다.

왼쪽에서 오른쪽으로 다음 작업을 수행합니다.

• 실행 재개 : 다음 중단점까지 계속 처리
• step over : 다음 명령을 실행하되 현재 코드 블록 내에서 유지 - 호출하는 함수로 점프하지 않음
• step into : 다음 명령을 실행하고 필요에 따라 기능으로 점프
• step out : 함수의 끝까지 처리를 계속하고 호출한 명령으로 돌아갑니다.
• step : 비동기 함수로 점프하지 않는다는 점을 제외하고는 step into 와 유사합니다.
• 모든 중단점 비활성화
• pause on exceptions : 오류가 발생하면 처리를 중지합니다.

조건부 중단점

때때로 중단점을 좀 더 제어해야 할 필요가 있습니다. 1,000번의 반복을 완료한 루프가 있지만 마지막 루프의 상태에만 관심이 있다고 상상해 보십시오.

 for (let i = 0; i < 1000; i++) { // set breakpoint here }

실행 재개 를 999번 클릭하는 대신 라인을 마우스 오른쪽 버튼으로 클릭하고 조건부 중단점 추가 를 선택한 다음 i = 999 와 같은 조건을 입력할 수 있습니다.

Chrome은 조건부 중단점을 파란색이 아닌 노란색으로 표시합니다. 이 경우 중단점은 루프의 마지막 반복에서만 트리거됩니다.

로그 포인트

로그 포인트는 코드 없이 console.log()를 효과적으로 구현합니다! 코드가 임의의 행을 실행할 때 표현식을 출력할 수 있지만 중단점과 달리 처리를 중단하지 않습니다.

로그 포인트를 추가하려면 라인을 마우스 오른쪽 버튼으로 클릭하고 로그 포인트 추가 를 선택한 다음 표현식을 입력하십시오(예: 'loop counter i', i :

DevTools 콘솔은 위의 예에서 루프 loop counter i: 0 에서 loop counter i: 999 까지 출력합니다.

VS Code를 사용하여 Node.js 애플리케이션 디버그

VS Code 또는 Visual Studio Code는 웹 개발자들 사이에서 인기를 얻고 있는 Microsoft의 무료 코드 편집기입니다. 이 애플리케이션은 Windows, macOS 및 Linux에서 사용할 수 있으며 Electron 프레임워크의 웹 기술을 사용하여 개발되었습니다.

VS Code는 Node.js를 지원하며 디버깅 클라이언트가 내장되어 있습니다. 대부분의 응용 프로그램은 구성 없이 디버깅할 수 있습니다. 편집기는 자동으로 디버깅 서버와 클라이언트를 시작합니다.

시작 파일(예: index.js)을 열고 실행 및 디버그 창을 활성화하고 실행 및 디버그 버튼을 클릭하고 Node.js 환경을 선택합니다. 빨간색 원 아이콘으로 표시된 중단점을 활성화하려면 라인을 클릭하십시오. 그런 다음 이전과 같이 브라우저에서 애플리케이션을 엽니다. 중단점에 도달하면 VS Code가 실행을 중지합니다.

Variables , Watch , Call Stack 및 Breakpoints 창은 Chrome DevTools에 표시된 창과 유사합니다. 로드된 스크립트 창은 로드된 스크립트를 보여주지만 많은 스크립트가 Node.js 내부에 있습니다.

작업 아이콘 도구 모음을 사용하여 다음을 수행할 수 있습니다.

• 실행 재개 : 다음 중단점까지 계속 처리
• step over : 다음 명령을 실행하되 현재 함수 내에서 유지 - 호출하는 함수로 점프하지 않음
• step into : 다음 명령을 실행하고 호출하는 함수로 점프
• step out : 함수의 끝까지 처리를 계속하고 호출한 명령으로 돌아갑니다.
• 응용 프로그램 및 디버거 다시 시작
• 애플리케이션 및 디버거 중지

Chrome DevTools와 마찬가지로 줄을 마우스 오른쪽 버튼으로 클릭하여 조건부 중단점 및 로그 지점 을 추가할 수 있습니다.

자세한 내용은 Visual Studio Code에서 디버깅을 참조하세요.

VS Code 고급 디버깅 구성

다른 장치, 가상 머신에서 코드를 디버그하거나 nodemon과 같은 대체 시작 옵션을 사용해야 하는 경우 추가 VS Code 구성이 필요할 수 있습니다.

VS Code는 프로젝트의 .vscode 디렉터리에 있는 launch.json 파일에 디버깅 구성을 저장합니다. 실행 및 디버그 창을 열고 launch.json 파일 만들기 를 클릭하고 Node.js 환경을 선택하여 이 파일을 생성합니다. 예제 구성이 제공됩니다.

구성 설정의 수에 관계없이 "configurations" 배열의 개체로 정의할 수 있습니다. 구성 추가… 를 클릭하고 적절한 옵션을 선택합니다.

개별 Node.js 구성은 다음 중 하나를 수행할 수 있습니다.

1. 프로세스 자체를 시작하거나
2. 원격 시스템 또는 Docker 컨테이너에서 실행 중인 디버깅 웹 소켓 서버에 연결합니다.

예를 들어, nodemon 구성을 정의하려면 Node.js: Nodemon 설정 을 선택하고 필요한 경우 "프로그램" 입력 스크립트를 변경하십시오.

 { // custom configuration "version": "0.2.0", "configurations": [ { "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "name": "nodemon", "program": "${workspaceFolder}/index.js", "request": "launch", "restart": true, "runtimeExecutable": "nodemon", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" } ] }

launch.json 파일을 저장하면 실행 및 디버그 창 상단의 드롭다운 목록에 nodemon (구성 "이름")이 나타납니다. 녹색 실행 아이콘을 클릭하여 해당 구성 사용을 시작하고 nodemon을 사용하여 애플리케이션을 시작합니다.

이전과 마찬가지로 중단점, 조건부 중단점 및 로그 지점을 추가할 수 있습니다. 주요 차이점은 파일이 수정되면 nodemon이 자동으로 서버를 다시 시작한다는 것입니다.

자세한 내용은 VS Code 시작 구성을 참조하세요.

다음 VS Code 확장은 원격 또는 격리된 서버 환경에서 호스팅되는 코드를 디버그하는 데도 도움이 될 수 있습니다.

• 원격 — 컨테이너: Docker 컨테이너에서 실행 중인 앱에 연결
• 원격 — SSH: 원격 서버에서 실행 중인 앱에 연결
• 원격 — WSL: Linux용 Windows 하위 시스템(WSL)에서 실행되는 앱에 연결합니다.

기타 Node.js 디버깅 옵션

Node.js 디버깅 가이드는 Visual Studio, JetBrains WebStorm, Gitpod 및 Eclipse를 포함한 다양한 텍스트 편집기 및 IDE에 대한 조언을 제공합니다. Atom은 Chrome DevTools 디버거를 편집기에 통합하는 노드 디버그 확장을 제공합니다.

애플리케이션이 활성화되면 실제 사용자가 접하는 클라이언트 및 서버 오류를 기록하고 재생할 수 있는 LogRocket 및 Sentry.io와 같은 상용 디버깅 서비스 사용을 고려할 수 있습니다.

애플리케이션 디버깅에 도움이 필요하십니까? 여기에서 시작 트윗하려면 클릭

요약

역사적으로 JavaScript 디버깅은 어려웠지만 지난 10년 동안 엄청난 개선이 있었습니다. 선택은 다른 언어에 대해 제공되는 것보다 낫지 는 않더라도 좋습니다.

문제를 찾기 위해 실용적인 도구를 사용하십시오. 빠른 버그 헌팅을 위해 console.log()에는 아무런 문제가 없지만 더 복잡한 문제에는 Chrome DevTools 또는 VS Code가 더 적합할 수 있습니다. 도구를 사용하면 보다 강력한 코드를 생성할 수 있으며 버그 수정에 소요되는 시간을 줄일 수 있습니다.

어떤 Node.js 디버깅 방법을 사용합니까? 아래 의견 섹션에서 공유하십시오!