노드 디버깅 방법

약간의 디버깅에 대해 이야기할 시간입니다. 이 게시물은 빠르게 작성되며 주로 Visual Studio Code에서 Node 앱을 디버깅할 때 작업을 수행하는 방법에 중점을 둡니다.

Visual Studio Code 시작 구성

VS Code는 왼쪽 열에 멋진 디버거가 있습니다. 디버거를 클릭하면 원하는 구성 유형을 묻는 옵션 톱니바퀴가 표시됩니다.



Node.js를 선택하면 몇 가지 속성이 있는 구성이 표시됩니다.



마지막 속성인 program에 대해 직접적으로 관심을 갖는 것입니다. 여기서는 현재 작업 공간 내에서 index.js라는 프로그램을 시작한다고 명시되어 있습니다. 이제 노드를 작성하고 이것이 무엇을 하는지 봅시다.

const avengers = ['Iron Man', 'Captain America', 'Thor', 'Captain Marvel'];

for (let i = 0; i < avengers.length; i++) {
  const theHero = avengers[i];
  console.log(theHero);
}

다음은 index.js 의 기반으로 사용할 수 있는 코드입니다. 해당 코드를 작업 공간의 index.js 파일에 저장한 후. 줄 번호 왼쪽의 레일을 클릭하여 줄 5에 중단점을 놓을 수 있습니다.



그런 다음 디버거로 돌아가 재생 버튼을 클릭하면 프로그램이 실행되고 해당 줄에서 프로그램 실행이 일시 중지됩니다.



왼쪽에서 현재 범위theHero: "Iron Man"의 값을 가진 변수를 볼 수 있습니다. 변수와 특정 실행 시간을 드릴다운하고 검사할 수 있는 다른 범위가 많이 있습니다.

이것은 기본적인 예이지만 좋은 디버거가 얼마나 훌륭하고 가치가 있는지 보여줍니다. VS Code 내에서 탐색할 수 있는 다양한 내장 유용한 옵션이 있습니다. 자세한 내용은 VS Code 문서의 Node.js Debugging Config Common Scenarios 섹션을 확인하세요.

Visual Studio 코드 연결 구성

VS Code 디버거를 사용하는 가장 일반적인 방법은 디버거를 현재 실행 중인 노드 프로세스에 연결하고 해당 프로세스 내에서 중단점을 설정하는 것입니다. 일부 Node Express 앱을 디버깅할 때 이것을 자주 사용합니다.

아래는 여기서 예제의 기반으로 사용할 기본 익스프레스 앱입니다. index.js 파일의 코드를 교체하고 express를 통해 npm를 설치하는 것을 잊지 마십시오.

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

const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {
  const data = {
    hello: 'world'
  };

  res.json(data);
});

app.listen(PORT, () => console.log(`Up and running ${PORT}`));

다음으로 .vscode/launch.json를 엽니다. 그러면 큰 파란색Add Configuration 버튼이 표시됩니다. 클릭하면 선택할 수 있는 여러 가지 구성이 표시됩니다. 이 경우 첫 번째 Node.js 연결 옵션을 선택합니다.



그러면 해당 구성이 디버거에서 사용할 수 있도록 구성 배열에 추가됩니다.

다음으로 --inspect 플래그로 노드를 실행합니다.



그런 다음 노드 디버거가 포트9229와 Chrome 개발 도구 URL에서 수신 대기 중임을 알리는 스크립트가 노드를 시작한 다음 앱 출력을 표시합니다. 해당 포트는 연결 구성에서 찾고 있는 포트와 동일한 포트입니다.

다음으로 index.js 스크립트로 이동하여 응답이 전송되기 전에 app.get 호출 내에 중단점을 놓습니다.



VS Code 디버거를 열고 재생을 누르면 VS Code 상단에 일부 컨트롤이 표시됩니다. 이제 해당 경로로 이동하여 해당 코드와 디버거를 트리거하고 Chrome을 열고 localhost:5000를 눌러야 합니다. 이렇게 하면 요청 범위의 변수와 정보를 볼 수 있는 VS Code 디버거로 돌아갑니다.



그게 다야!

요약

console.log는 시도되고 사실이지만 VS Code 디버거 또는 주변의 디버그 도구를 이해하는 데 한 시간 이상을 투자하면 문제 해결이 조금 더 쉬워질 것이라고 생각합니다. 그럼 아래 정보를 확인하시길 추천드려요!

VS Code Debugger

VS Code Node Debugging

이 기사가 마음에 드셨다면 ❤️을 많이 보여주세요. 그렇지 않다면 그것에 대해 이야기합시다 😃.

원래 내 블로그johnstewart.io에 게시되었습니다.