[Express]debug 모듈 + VSCode 디버그 연동하기

express 프레임워크 기본 디렉토리 구조를 설치하면 debug모듈을 사용하여 debug모드에서만 로그를 남길 수 있다.

console.log()로 남긴 로그들은 서비스를 할 경우 제거를 해줘야하는 번거로움이 있기 때문에 debug시에만 동작하는 로그들이 있으면 개발환경, 서비스환경을 번거로운 절차가 필요없이 간단한 키워드를 추가하고 빼는것으로 설정가능하다.

---

node 인스펙터

node 디버깅 관련 문서를 확인해보면(https://nodejs.org/ko/docs/guides/debugging-getting-started/) node 버전8부터 Inspector API를 이용하여 디버그를 한다고 한다. (현재 로컬에 설치된 node 버전은 12이다.)

node를 실행시킬 때 --inspect 옵션을 넣어주게 되면 node서버가 시작되고 인스펙터 클라이언트(디버깅 프로그램)가 접속할 수 있는 url이 열리게 된다.

9229(default)포트번호로 VSCode의 디버깅 툴과 연동을 할 것이다.

---

VSCode를 열고 node.js 프로젝트 폴더를 열어서 실행할 server.js를 F5번으로 디버그 시작을 하게되면 launch.json이 만들어지게 되면서 디버그가 시작된다.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\bin\\www"
        }
    ]
}

express는 bin/www가 시작지점이어서 program 설정이 위와같이 되어있다.

DEBUG CONSOLE 창에 뜨는 로그

 

DEBUG CONSOLE 창을 찾을 수 없다면 아래와 같이 눌러서 창을 띄우자.

 

위에 실행된 로그를 살펴보면

C:\ProgramFiles\nodejs\node.exe --inspect-brk=41043 bin\www

처럼 자동으로 node 실행파일을 찾아서 --inspect 옵션으로 디버그모드로 실행 시키고 있다. 뒤에 -brk 인자는 breakpoint를 실행하겠다는 뜻이다. 또한 =41043는 따로 이 포트번호로 디버깅을 진행하겠다는 뜻

 

현재 상태로도 충분히 breakpoint를 찍으며 디버그를 진행이 가능하다.

하지만 디버그 모드로 서버가 실행됐음에도 onListening 에서 debug모듈이 제대로 동작하지 않는다.

 

VSCode에서 디버그 기능과 연동 이전에 CMD 창에서의 debug모듈이 실행가능하도록 해 볼것이다.

set DEBUG=app:www & node ./bin/www

위의 커맨드는 환경변수 DEBUG에 app:www 문자열을 넣어놓고 난 다음 node로 www를 실행한다는 뜻

Window 운영체제에서는 앞에 set이 반드시 필요하다. 다른 환경에서의 command는 가이드(https://www.npmjs.com/package/debug)를 참고하자

DEBUG의 값은 debug모듈 사용 시 특정 로그만 출력할 수 있도록 설정이 가능하다.

(모듈명:로그명) 과같은 패턴으로 설정가능

지금은 debug모듈을 생성할 때 DEBUG 값에 app:www가 있으면 해당 로그를 출력하라는 뜻이다.

 

결과는

app:www 범위의 debug객체를 생성하여 onListening 메소드 안에 출력한 로그가 제대로 찍히는 것을 확인 할 수 있다.

 

다른 예로 이미 만들어져있는 express 프레임워크 자체의 debug로그도 출력가능하다.

(모듈명:로그명) 으로 생성할 수 있으니 express의 모든 debug 로그를 출력해보자

set DEBUG=express:* & node ./bin/www

이렇게 express 모듈에 등록된 debug로그를 다 확인 가능하다.

 

DEBUG 환경변수는 "," 로 다중값을 넣을 수 있다.

set DEBUG=express:*,app:www & node ./bin/www

 

자 debug모듈의 실행환경을 설정해주었으니 이것을 VSCode와 연동하여 디버그모드 + 디버그로그를 남겨보도록 하자.

 

package.json의 scripts값을 이와같이 설정하자.

  "scripts": {
    "start": "node ./bin/www",
    "debug": "set DEBUG=test:www & node --inspect-brk ./bin/www"
  },

npm script 실행인자로 "debug"를 넣으면 debug모듈이 실행가능하도록하고 디버그모드도 실행하도록 명령어를 넣었다.

 

그리고 프로젝트 폴더에 .vscode 폴더안에 launch.json도 아래와같이 수정해주자.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            //"program": "${workspaceFolder}\\bin/www",
            "protocol":"inspector",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run-script", "debug"],
            "port": 9229 // default 9229
        }
    ]
}

기존에 "program" 값을 주석처리하고 커스텀하게 설정을 변경하였다.

자세하게 어떤 설정이 가능한지를 알고 싶으면 공식문서(https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_skipping-uninteresting-code-node-chrome)를 살펴보자.

 

여기서는 그냥 간단하게만 알아볼것이다.

1) "skipFIles"의 값은 디버그를 실행하지 않을 파일들을 배열로 넣는 곳이다.

현재 "<node_internals>/**" 가 설정되어 있는데 이것은 node의 core javascript 파일들을 의미한다.

문서에는 아래와같이 설명되어있음

Built-in core modules of Node.js can be referred to by the 'magic name' <node_internals> in a glob pattern. The following example skips all internal modules:

 

2) "protocol":"inspector"

- node프로세스와 디버그통신할 때 사용할 프로토콜을 설정하는 값이다.

3) "runtimeExecutable": "npm"

- 디버그모드로 실행할때 명령어를 뭐로 실행할 것인지 정하는 값 default는 "node" 지만 우리는 npm 스크립트를 이용할 것이기 때문에 "npm" 지정

4) "runtimeArgs": ["run-script", "debug"],

- npm 으로 실행 시 넣어줄 인자를 설정하는 곳이다. 우리는 package.json에 설정해놓은 scripts중 "debug" 를 실행 시켜야하니

첫번째 인자로 "run-script" or "run" (이는 "debug"가 npm scripts의 기본 keyword가 아니어서 넣어줘야하는 인자다. 사용가능한 기본 keyword "start" 같은것은 "run"이 필요없다)

두번째 인자로 scripts 값 "debug"를 넣어줘야한다.

5) "port": 9229 // default 9229

- node 디버그 포트를 지정하는 값

 

자 이렇게 넣고나서 VSCode에서 F5번으로 실행을 하게되면 디버그도 가능하면서 디버그 로그도 확인 가능하다!!

VSCode breakpoint 동작

("test:www")로 생성한 debug 객체의 로그 확인

 

사실 express 기본 debug모듈을 사용하기 위해서 이렇게 설정을 했는데 "winston" 모듈의 level기능을 이용하여 debug, info 등 출력 + 저장까지 가능하게 하여 사용할 수 있다. 이러한 설정도 나중에 다뤄보도록 하겠다.

끄읏!