Visual Studio Code 디버깅(debugging) for Node.js

IT/NodeJS / / 2019. 12. 8. 18:08
반응형

안녕하세요.

프로그램 개발이나 운영시 가장 중요한 요소가 디버깅이라고 생각하는데요.

Visual Studio Code IDE Tool에서 node.js 개발 시 디버깅하는 방법을 소개해 드리겠습니다.

 

Node.js 설치는 아래 포스팅 참고하세요.

https://meyouus.tistory.com/62

 

Node.js 설치와 NPM 이해하기

안녕하세요. Javascript 기반으로 확장성 있는 애플리케이션 개발에 많이 이용되고 있는 Node를 설치해 보고 간단한 예제를 실행해 보겠습니다. Node에 대한 설명은 홈페이지에 잘 나와 있는데요. https://nodejs...

meyouus.tistory.com

▼ Visual Studio Code에서 간단한 연산 처리 Test01.js 파일 생성 후 디버깅합니다.

function sum(a, b) {
    return a + b;
}

console.log('합계 = ' + sum(15, 35));

 

① 디버그 : Ctrl + <Shift> + D

② 디버깅 시작 : F5

③ 디버깅 작업창

④ 디버그 콘솔 : 실행결과 출력

▼ 디버깅 작업창 안내

구분 설명 단축키
① 계속/일시중지 F5
② 단위실행 F10
③ 단계정보 F11
④ 단계출력 Shit + F11
⑤ 다시시작 Ctrl + Shift + F5
⑥ 중지 Shift + F5

 

▼ launch.json 파일 설정

 

고급 디버깅을 하려면 환경설정을 해줘야 합니다.

상단에 'launch.json' 구성을 클릭하면 디버깅 환경설정 파일이 생성됩니다.

'launch.json' 파일은 '. vscode' 폴더에 생성됩니다.

 

① launch.json 파일 열기

② 디버깅 Type

③ 프로그램 구분 이름을 지정하면 ⑤ 번에 표시된다.

④ 실행 프로그램

 

▼ launch.json 구성 추가

Test02.js 파일을 생성합니다.

function minus(a, b) {
    return a - b;
}

console.log('차 = ' + minus(100, 50));

① 구성 추가 클릭

② Node.js: 프로그램 실행

 

① 구성이 추가되고 이름과 실행한 프로그램을 지정한다.

② 이름을 다르게 지정하면 디버그 리스트에 추가된다.

    동일한 이름인 경우 맨 상위에 지정한 프로그램이 실행된다.

 

▼ 디버깅 세션이 시작 되 자마자 DEBUG CONSOLE 패널이 표시되고 디버깅 출력이 표시되고 상태 표시 줄에 색상이 변경됩니다 (기본 색상 테마의 경우 주황색).

또한 상태 표시 줄에 디버그 상태 가 나타나 활성 디버그 구성을 보여줍니다. 디버그 상태를 선택하면 디버그 보기를 열지 않고도 활성 시작 구성을 변경하고 디버깅을 시작할 수 있습니다.

 

아래 내용은 Visual Studio Code의 디버깅에 대한 상세 설명 내용입니다.

https://code.visualstudio.com/docs/editor/debugging#_remote-debugging

 

Debugging in Visual Studio Code

One of the great things in Visual Studio Code is debugging support. Set breakpoints, step-in, inspect variables and more.

code.visualstudio.com

Launch.json 속성

launch.json에는 다양한 디버거 및 디버깅 시나리오를 지원하는 데 도움 이되는 많은 속성이 있습니다.

위에서 언급했듯이 IntelliSense ( Ctrl + Space )를 사용하면 type속성 값을 지정한 후 사용 가능한 속성 목록을 볼 수 있습니다.

모든 시작 구성에 다음 속성이 필수입니다.

  • type- 시작 구성에 사용할 디버거 유형입니다. 모든 설치 디버그 확장 유형을 소개 : node노드 내장 디버거, 예를 들어, php하고 go는 PHP 및 go 확장.
  • request- 시작 구성의 요청 ​​유형 현재 launch및 attach지원됩니다.
  • name -디버그 시작 구성 드롭 다운에 표시되는 이름입니다.

모든 시작 구성에 사용할 수 있는 몇 가지 선택적 속성은 다음과 같습니다.

  • preLaunchTask-디버그 세션을 시작하기 전에 태스크를 시작하려면이 속성을 tasks.json (작업 공간의. vscode폴더)에지정된 태스크 이름으로 설정하십시오.또는 ${defaultBuildTask}기본 빌드 작업을 사용하도록 설정할 수 있습니다.
  • postDebugTask-디버그 세션의 맨 마지막에 작업을 시작하려면이 속성을 tasks.json (작업 공간의. vscode폴더)에지정된 작업 이름으로 설정하십시오.
  • internalConsoleOptions -이 속성은 디버깅 세션 중 디버그 콘솔 패널의 가시성을 제어합니다.
  • debugServer- 디버그 확장 작성자 전용 :이 속성을 사용하면 디버그 어댑터를 시작하지 않고 지정된 포트에 연결할 수 있습니다.
  • serverReadyAction-디버깅 중인 프로그램이 디버그 콘솔 또는 통합 터미널에 특정 메시지를 출력할 때마다 웹 브라우저에서 URL을 열려면 자세한 내용은 아래 서버 프로그램을 디버깅할 때 자동으로 URI 열기 섹션을 참조하십시오.

많은 디버거는 다음 특성 중 일부를 지원합니다.

  • program -디버거를 시작할 때 실행할 실행 파일 또는 파일
  • args -디버깅을 위해 프로그램에 전달된 인수
  • env-환경 변수 (값 null을 사용하여 변수를 "정의 해제"할 수 있음)
  • cwd -종속성 및 기타 파일을 찾기 위한 현재 작업 디렉토리
  • port -실행중인 프로세스에 연결할 때 포트
  • stopOnEntry -프로그램이 시작되면 즉시 휴식
  • console-사용할 콘솔 종류 (예 internalConsole: integratedTerminal, 또는externalTerminal

변수 치환

VS Code는 일반적으로 사용되는 경로 및 기타 값을 변수로 사용할 수 있게하고 문자열 내 변수 대체를 지원합니다 launch.json. 즉, 디버그 구성에서 절대 경로를 사용할 필요가 없습니다. 예를 들어, ${workspaceFolder}작업 공간 폴더의 루트 경로 ${file}, 활성 편집기에서 열린 파일 및 ${env:Name}환경 변수 'Name'을 제공합니다. 변수 참조에서 또는 launch.json문자열 속성 내에서 IntelliSense를 호출하여 사전 정의된 변수의 전체 목록을 볼 수 있습니다.

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

플랫폼 별 속성

디버거가 실행 중인 운영 체제에 따라 Launch.json 값 정의 (예 : 프로그램에 전달할 인수)를 지원합니다. 그렇게하려면 플랫폼 별 리터럴을 launch.json파일에 넣고 해당 리터럴 내에 해당 속성을 지정하십시오.

아래는 Windows에서 "args" 프로그램에 다르게 전달되는 예입니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

유효한 운영 속성은 "windows"Windows, "linux"Linux 및 "osx"macOS입니다. 운영 체제 별 범위에 정의된 속성은 전역 범위에 정의 된 속성보다 우선합니다.

아래 예제에서 디버깅은 항상 macOS를 제외하고 시작시 프로그램을 중지합니다 .

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

글로벌 시작 구성

VS Code는 사용자 설정 내에 "launch" 개체 추가를 지원합니다.그런 다음 이 "launch" 구성은 작업 공간에서 공유됩니다. 예를 들면 다음과 같습니다.

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

팁 : 작업 공간에 "launch.json"가 포함되어 있으면 글로벌 실행 구성이 무시됩니다.

고급 중단 점 주제

조건부 중단 점

강력한 VS Code 디버깅 기능은 식, 적중 횟수 또는이 둘의 조합을 기반으로 조건을 설정하는 기능입니다.

  • 식 조건 : 조건식이 True인 경우 중단 점에 도달합니다.
  • 적중 횟수 : '적중 횟수'는 실행이 '중단'되기 전에 중단 점에 도달해야 하는 횟수를 제어합니다. '적중 횟수'가 적용되는지 여부와 표현식의 정확한 구문은 디버거 확장에 따라 다릅니다.

중단 점을 만들 때 ( 조건부 중단 점 추가 작업 사용) 또는 기존 중단 점을 수정할 때 ( 중단 점 편집 작업 사용) 조건 및 / 또는 적중 횟수를 추가할 수 있습니다.두 경우 모두, 식을 입력 할 수 있는 드롭 다운 메뉴가 있는 인라인 텍스트 상자가 열립니다.

디버거가 조건부 중단 점을 지원하지 않으면 조건부 중단 점 추가 조치가 누락됩니다.

인라인 중단 점

인라인 중단 점은 실행이 인라인 중단 점과 연관된 열에 도달할 때만 적중됩니다. 한 줄에 여러 문이 포함된 축소된 코드를 디버깅할 때 특히 유용합니다.

인라인 중단 점은 Shift + F9를 사용하거나 디버그 세션 중 상황에 맞는 메뉴를 통해 설정할 수 있습니다.

인라인 중단 점은 편집기에 인라인으로 표시됩니다.

인라인 중단 점에도 조건이 있을 수 있습니다. 편집기의 왼쪽 여백에 있는 상황에 맞는 메뉴를 통해 한 줄에서 여러 중단 점을 편집할 수 있습니다.

기능 중단 점

디버거는 소스 코드에 직접 중단 점을 배치하는 대신 함수 이름을 지정하여 중단 점 작성을 지원할 수 있습니다.

소스를 사용할 수 없지만 기능 이름을 알고 있는 경우에 유용합니다.

BREAKPOINTS 섹션 헤더에서+ 버튼 을 누르고 기능 이름을 입력하면 기능 중단 점이 작성됩니다.기능 중단 점은 BREAKPOINTS 섹션 에 빨간색 삼각형으로 표시됩니다.

데이터 중단 점

디버거가 데이터 중단 점을 지원하는 경우 VARIABLES 보기 에서 설정할 수 있으며 기본 변수의 값이 변경되면 적중됩니다. BREAKPOINTS 섹션 에 데이터 중단 점이 빨간색 육각형으로 표시됩니다.

디버그 콘솔 REPL

디버그 콘솔 REPL ( Read-Eval-Print Loop ) 기능을 사용하여 평가할 수 있습니다. 디버그 콘솔을 열려면 디버그 분할 창의 맨 위에 있는 디버그 콘솔 조치를 사용하거나 보기 : 디버그 콘솔 명령 ( Ctrl + Shift + Y )을 사용하십시오. Enter 키 를 누르면 표현식이 평가되고 입력 할 때 디버그 콘솔 REPL에 제안 사항이 표시됩니다. 여러 줄을 입력해야 하는 경우 줄 사이에 Shift + Enter를 를 사용하고 Enter 를 사용 하여 평가할 모든 줄을 보내 십시오 .

참고 : 디버그 콘솔 REPL을 사용하려면 실행 중인 디버그 세션에 있어야 합니다.

디버그 대상과 입출력을 리디렉션 (Redirect input/output to/from the debug target)

입력 / 출력 리디렉션은 디버거 / 런타임에 따라 다르므로 VS Code에는 모든 디버거에서 작동하는 기본 제공 솔루션이 없습니다.

고려해야 할 두 가지 접근 방식은 다음과 같습니다.

  1. 터미널 또는 명령 프롬프트에서 수동으로 디버그 ( "디버그 대상")하도록 프로그램을 시작하고 필요에 따라 입력 / 출력을 리디렉션 하십시오. 디버거가 연결할 수 있도록 적절한 명령 행 옵션을 디버그 대상에 전달하십시오. 디버그 대상에 연결되는 "첨부"디버그 구성을 작성하고 실행하십시오.

  2. 사용 중인 디버거 확장 프로그램이 VS Code의 통합 터미널 (또는 외부 터미널)에서 디버그 대상을 실행할 수 있으면 셸 리디렉션 구문 (예 : "<"또는 ">")을 인수로 전달할 수 있습니다.

launch.json구성 예는 다음과 같습니다.

{
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

 

이 방법을 사용하려면 "<" 구문이 디버거 확장을 통해 전달되고 통합 터미널에서 수정되지 않은 상태가 됩니다.

다중 타깃 디버깅 (Multi-target debugging)

하나 이상의 프로세스 (예 : 클라이언트 및 서버)와 관련된 복잡한 시나리오의 경우 VS Code는 다중 대상 디버깅을 지원합니다.

다중 대상 디버깅 사용은 간단합니다. 첫 번째 디버그 세션을 시작한 후 다른 세션을 시작할 수 있습니다. 두 번째 세션이 시작되고 실행되면 VS Code UI가 다중 대상 모드로 전환됩니다.

  • 개별 세션은 이제 CALL STACK 보기 에서 최상위 요소로 표시됩니다.
  • 디버그 도구 모음에는 현재 활성 세션이 표시됩니다 (다른 모든 세션은 드롭 다운 메뉴에서 사용 가능).
  • 디버그 조치 (예 : 디버그 도구 모음의 모든 조치)는 활성 세션에서 수행됩니다. 활성 세션은 디버그 도구 모음의 드롭 다운 메뉴를 사용하거나 CALL STACK 보기 에서 다른 요소를 선택하여 변경할 수 있습니다.

Compound launch configurations

여러 디버그 세션을 시작하는 다른 방법은 복합 시작 구성을 사용하는 것입니다.복합 실행 구성에는 병렬로 시작해야 하는 둘 이상의 실행 구성 이름이 나열됩니다. 선택적으로 preLaunchTask개별 디버그 세션이 시작되기 전에 실행되는을 지정할 수 있습니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}"
    }
  ]
}

 

복합 실행 구성은 실행 구성 드롭 다운 메뉴에 표시됩니다.

원격 디버깅 (Remote debugging)

VS 코드 자체는 원격 디버깅을 지원하지 않습니다. 이것은 사용 중인 디버그 확장의 기능이므로 지원 및 세부 사항 은 Marketplace 의 확장 페이지를 참조하십시오.

그러나 VS 코드에 포함된 Node.js 디버거는 원격 디버깅을 지원합니다. 이를 구성하는 방법에 대해서는 Node.js 디버깅 주제를 참조하십시오 .

서버 프로그램을 디버깅할 때 자동으로 URI 열기 (Automatically open a URI when debugging a server program)

웹 프로그램을 개발하려면 일반적으로 디버거에서 서버 코드를 누르기 위해 웹 브라우저에서 특정 URL을 열어야 합니다.VS Code에는 이 작업을 자동화하기 위한 기본 제공 기능 " serverReadyAction "이 있습니다.

다음은 간단한 Node.js Express 애플리케이션 의 예입니다.

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

 

이 응용 프로그램은 먼저 "/"URL에 대한 "Hello World"처리기를 설치 한 다음 포트 3000에서 HTTP 연결 수신을 시작합니다. 포트는 디버그 콘솔에서 발표되며 일반적으로 개발자는 이제 http://localhost:3000브라우저 응용 프로그램을 입력 합니다.

serverReadyAction의 특징은 가능한 구조화된 속성을 추가할 수 serverReadyAction있는 발사 설정 및 수행할 수 있는 "조치"를 선택합니다 :

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

 

여기서 pattern속성은 포트를 알리는 프로그램의 출력 문자열과 일치시키기 위한 정규식을 설명합니다. 포트 번호의 패턴은 괄호 안에 넣어 정규식 캡처 그룹으로 사용할 수 있습니다. 이 예에서는 포트 번호만 추출하지만 전체 URI를 추출할 수도 있습니다.

이 uriFormat특성은 포트 번호가 URI로 전환되는 방법을 설명합니다. 첫 번째 %s는 일치 패턴의 첫 번째 캡처 그룹으로 대체됩니다.

결과 URI는 URI의 체계에 대해 구성된 표준 응용 프로그램으로 VS 코드 외부 ( "외부") 외부에서 열립니다.

또는 action로 설정할 수 있습니다 debugWithChrome. 이 경우 VS Code는 URI 용 Chrome 디버그 세션을 시작합니다 (크롬 용 디버거 확장 프로그램이 설치되어 있어야 함). 이 모드에서는 webRootChrome 디버그 세션으로 전달되는속성을 추가할 수 있습니다.

약간 단순화하기 위해 대부분의 속성은 선택 사항이며 다음 대체 값을 사용합니다.

  • pattern : "listening on.* (https?://\\S+|[0-9]+)"일반적으로 사용되는 "listening on port 3000" 또는 "Now listening on : https : // localhost : 5001 " 메시지와 일치합니다.
  • uriFormat :"http://localhost:%s"
  • webRoot :"${workspaceFolder}"

여기 serverReadyAction 기능이 작동합니다.

다음 단계

VS Code의 Node.js 디버깅 지원에 대해 알아보려면 다음을 살펴보십시오.

  • Node.js -VS 코드에 포함된 Node.js 디버거에 대해 설명합니다.

Node.js 디버깅의 기본 사항에 대한 자습서를 보려면 다음 비디오를 확인하십시오.

VS Code의 작업 실행 지원에 대해 알아보려면 다음으로 이동하십시오.

  • 작업 -Gulp, Grunt 및 Jake로 작업을 실행하는 방법과 오류 및 경고를 표시하는 방법에 대해 설명합니다.

자신의 디버거 확장을 작성하려면 다음을 방문하십시오.

  • 디버거 확장 -모의 샘플을 사용하여 VS 코드 디버그 확장을 만드는 데 필요한 단계를 설명합니다.
반응형
저작자표시

'IT > NodeJS' 카테고리의 다른 글

Node mybatis-mapper를 이용한 mapper xml 개발 샘플  (0) 2020.01.01
Nodejs Express 이용한 post 호출시 request body에서 undefined 발생 해결  (3) 2019.12.10
Node.js oracledb를 통한 오라클 연결  (0) 2019.12.09
Node.js 설치와 NPM 이해하기  (0) 2019.12.07
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
IT/NodeJS 관련 글
글 더보기

티스토리툴바